/*
Theme Name: Faceless AI
Theme URI: https://facelessaiaccelerator.com
Description: Custom child theme for The Faceless AI Accelerator, an AI video ad studio. Built on GeneratePress. Pixel-matched to the approved mockup, no page builder, plain CSS and vanilla JS.
Author: Awais Ashraf
Author URI: https://facelessaiaccelerator.com
Template: generatepress
Version: 1.0.0
Text Domain: faceless-ai
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   Design tokens
   Single source of truth. Declared once, referenced everywhere.
   Never hardcode a hex value outside this block.
   Source: docs/04-DESIGN-SYSTEM.md
   ========================================================================== */

:root{
  /* Surfaces */
  --fa-bg:        #070B12;  /* page background, deep navy black */
  --fa-bg-2:      #0B111C;  /* alternating section background */
  --fa-card:      #0F1724;  /* card and panel background */

  /* Lines */
  --fa-line:      #1D2A3D;  /* default borders and dividers */
  --fa-line-2:    #2C3E57;  /* hover and emphasised borders */

  /* Text */
  --fa-txt:       #EEF3FA;  /* primary text */
  --fa-muted:     #8496AE;  /* secondary text */
  --fa-dim:       #5C7290;  /* tertiary, footer labels */
  --fa-txt-2:     #C4D2E4;  /* body inside cards and list items */

  /* Brand */
  --fa-cyan:      #22D3EE;  /* primary accent */
  --fa-blue:      #2B7BFF;  /* secondary accent */
  --fa-grad:      linear-gradient(120deg, var(--fa-cyan), var(--fa-blue));
  --fa-glow:      rgba(34,211,238,.16);

  /* Semantic */
  --fa-on-accent: #04070D;  /* text sitting on a cyan or blue fill */
  --fa-success:   #34D399;
  --fa-warn:      #FBBF24;
  --fa-danger:    #F87171;

  /* Accent tints, derived from cyan so we never hardcode rgba hexes ad hoc */
  --fa-cyan-07:   rgba(34,211,238,.07);
  --fa-cyan-09:   rgba(34,211,238,.09);
  --fa-cyan-20:   rgba(34,211,238,.20);
  --fa-cyan-30:   rgba(34,211,238,.30);
  --fa-cyan-50:   rgba(34,211,238,.50);
  --fa-blue-14:   rgba(43,123,255,.14);
  --fa-blue-22:   rgba(43,123,255,.22);
  --fa-blue-32:   rgba(43,123,255,.32);

  /* Radius */
  --fa-r-btn:     9px;
  --fa-r-card:    16px;
  --fa-r-lg:      20px;
  --fa-r-cta:     24px;
  --fa-r-pill:    100px;

  /* Elevation */
  --fa-shadow-card:  0 18px 44px rgba(0,0,0,.45);
  --fa-shadow-video: 0 30px 90px rgba(0,0,0,.60);
  --fa-shadow-cta:   0 12px 34px rgba(34,211,238,.26);
  --fa-shadow-reel:  0 20px 50px rgba(34,211,238,.12);

  /* Decorative gradients. Kept here so no raw hex leaks into component CSS. */
  --fa-grad-hero-glow: radial-gradient(circle, rgba(43,123,255,.22), transparent 66%);
  --fa-grad-cta:       linear-gradient(135deg, rgba(43,123,255,.18), rgba(34,211,238,.09));
  --fa-grad-video:     linear-gradient(150deg, #152234, #080D16 62%);
  --fa-grad-reel:      linear-gradient(165deg, #162234, #0A101B);
  --fa-grad-plan-feat: linear-gradient(180deg, rgba(34,211,238,.07), var(--fa-card));
  --fa-grad-big-alt:   linear-gradient(150deg, rgba(43,123,255,.14), var(--fa-card));

  /* Scrims: dark overlays that keep text legible over imagery. */
  --fa-scrim:   rgba(4,7,13,.60);
  --fa-scrim-2: rgba(4,7,13,.85);

  /* Spacing scale: 4 8 12 16 20 24 30 40 54 72 100 140 */
  --fa-s-1:  4px;
  --fa-s-2:  8px;
  --fa-s-3:  12px;
  --fa-s-4:  16px;
  --fa-s-5:  20px;
  --fa-s-6:  24px;
  --fa-s-7:  30px;
  --fa-s-8:  40px;
  --fa-s-9:  54px;
  --fa-s-10: 72px;
  --fa-s-11: 100px;
  --fa-s-12: 140px;

  /* Layout */
  --fa-container:     1200px;
  --fa-container-pad: 30px;
  --fa-sec-pad:       100px;

  /* Type */
  --fa-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Motion */
  --fa-t: .18s ease;
}

/*
 * Real base, reset, and component styles are enqueued separately from
 * assets/css/ so this file stays a lightweight, cacheable token sheet that
 * the child theme header can point at. Do not add component CSS here.
 */