/* ===========================================================================
   fastabiqu design tokens
   Transcribed verbatim from the app so the site and the app cannot drift:
     colors  -> fastabiqu/src/lib/tokens.ts        (LIGHT_HEX / DARK_HEX)
     shadows -> fastabiqu/src/lib/tokens.ts        (createThemeTokens)
     type    -> docs/design-system/project/tokens/typography.css
     space   -> docs/design-system/project/tokens/spacing.css

   THIS IS THE ONLY FILE IN THE SITE ALLOWED TO CONTAIN A COLOR LITERAL.
   The single exception elsewhere is <meta name="theme-color">, which cannot
   take a custom property.

   Three theme states, in this order, and the order matters:
     :root                                   light, the default
     prefers-color-scheme: dark + :not([data-theme="light"])   system dark
     :root[data-theme="dark"]                explicit choice wins either way
   =========================================================================== */

:root {
  /* --- surfaces and text ------------------------------------------------ */
  --background:        #FAF8F5;
  --background-alt:    #F3EFE9;
  --surface:           #FFFFFF;
  --surface-sunken:    #F5F2EC;
  --overlay:           26, 26, 23;      /* channels, for rgb(var(--overlay) / a) */
  --foreground:        #1A1A17;
  --foreground-muted:  #77726A;
  --foreground-faint:  #A09A90;
  --border:            #ECE6DD;
  --border-strong:     #DCD4C8;

  /* --- brand ------------------------------------------------------------ */
  --brand:             #16233D;
  --brand-soft:        #EAEEF6;
  --brand-foreground:  #FFFFFF;

  --accent:            #E5B052;
  --accent-strong:     #B98524;
  --accent-soft:       #FEF3DE;
  --accent-foreground: #241E10;

  /* --- semantic --------------------------------------------------------- */
  --success:            #2F6B50;
  --success-soft:       #EAF3EE;
  --success-foreground: #FFFFFF;
  --danger:             #C2453C;
  --danger-soft:        #FBECEA;
  --danger-foreground:  #FFFFFF;
  --info:               #2E6E7E;
  --info-soft:          #E8F1F3;

  --ring:               #16233D;

  /* --- seats: the six player colors, used here for the category chips --- */
  --seat-1: #16233D;
  --seat-2: #2F6B50;
  --seat-3: #8A5C96;
  --seat-4: #2E6E7E;
  --seat-5: #A05B12;
  --seat-6: #A44562;
  --seat-foreground: #FFFFFF;

  /* --- elevation -------------------------------------------------------- */
  --shadow-sm:     0 1px 2px   rgba(26, 26, 23, .06);
  --shadow-md:     0 6px 18px  rgba(26, 26, 23, .08);
  --shadow-lg:     0 18px 44px rgba(26, 26, 23, .14);
  --shadow-accent: 0 6px 16px  rgba(229, 176, 82, .34);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background:        #0E1117;
    --background-alt:    #11151C;
    --surface:           #161B24;
    --surface-sunken:    #12161E;
    --overlay:           0, 0, 0;
    --foreground:        #F2EFE9;
    --foreground-muted:  #9AA3B2;
    --foreground-faint:  #6E7786;
    --border:            #232A36;
    --border-strong:     #303A4A;

    --brand:             #2F477A;
    --brand-soft:        #1A2234;
    --brand-foreground:  #F4F8FF;

    --accent:            #E9BC6A;
    --accent-strong:     #F0CD89;
    --accent-soft:       #2C2518;
    --accent-foreground: #1A1408;

    --success:            #4AA67D;
    --success-soft:       #162821;
    --success-foreground: #0B1611;
    --danger:             #E26A60;
    --danger-soft:        #2D1918;
    --danger-foreground:  #1A0C0B;
    --info:               #5AA6B8;
    --info-soft:          #142429;

    --ring:               #E9BC6A;

    --seat-1: #5A80C8;
    --seat-2: #4AA67D;
    --seat-3: #AE80BA;
    --seat-4: #5AA6B8;
    --seat-5: #D99A42;
    --seat-6: #D97791;
    --seat-foreground: #0C1016;

    --shadow-sm:     0 1px 2px   rgba(0, 0, 0, .5);
    --shadow-md:     0 6px 18px  rgba(0, 0, 0, .45);
    --shadow-lg:     0 18px 44px rgba(0, 0, 0, .55);
    --shadow-accent: 0 6px 18px  rgba(233, 188, 106, .18);
  }
}

:root[data-theme="dark"] {
  --background:        #0E1117;
  --background-alt:    #11151C;
  --surface:           #161B24;
  --surface-sunken:    #12161E;
  --overlay:           0, 0, 0;
  --foreground:        #F2EFE9;
  --foreground-muted:  #9AA3B2;
  --foreground-faint:  #6E7786;
  --border:            #232A36;
  --border-strong:     #303A4A;

  --brand:             #2F477A;
  --brand-soft:        #1A2234;
  --brand-foreground:  #F4F8FF;

  --accent:            #E9BC6A;
  --accent-strong:     #F0CD89;
  --accent-soft:       #2C2518;
  --accent-foreground: #1A1408;

  --success:            #4AA67D;
  --success-soft:       #162821;
  --success-foreground: #0B1611;
  --danger:             #E26A60;
  --danger-soft:        #2D1918;
  --danger-foreground:  #1A0C0B;
  --info:               #5AA6B8;
  --info-soft:          #142429;

  --ring:               #E9BC6A;

  --seat-1: #5A80C8;
  --seat-2: #4AA67D;
  --seat-3: #AE80BA;
  --seat-4: #5AA6B8;
  --seat-5: #D99A42;
  --seat-6: #D97791;
  --seat-foreground: #0C1016;

  --shadow-sm:     0 1px 2px   rgba(0, 0, 0, .5);
  --shadow-md:     0 6px 18px  rgba(0, 0, 0, .45);
  --shadow-lg:     0 18px 44px rgba(0, 0, 0, .55);
  --shadow-accent: 0 6px 18px  rgba(233, 188, 106, .18);
}

/* ===========================================================================
   Theme-independent tokens
   =========================================================================== */

:root {
  /* type — Reem Kufi for display and the wordmark, IBM Plex Sans Arabic for
     everything else INCLUDING numerals, so figures stay tabular in one family */
  --font-display: 'Reem Kufi', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-numeral: 'IBM Plex Sans Arabic', system-ui, sans-serif;

  --text-xs: 12px;  --text-sm: 14px;  --text-base: 16px; --text-md: 18px;
  --text-lg: 21px;  --text-xl: 26px;  --text-2xl: 33px;  --text-3xl: 42px;

  --leading-body: 1.75;
  --leading-tight: 1.25;
  --leading-display: 1.4;

  --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;

  --tracking-label: .04em;

  /* space and shape */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px;          /* site-only, for page sections */

  --radius-xs: 10px; --radius-sm: 12px; --radius-md: 16px;
  --radius-lg: 20px; --radius-xl: 26px; --radius-pill: 999px;

  --stroke-hair: 1px;
  --stroke-focus: 2px;
  --tap-min: 44px;

  /* motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);

  /* site-only layout */
  --measure: 34rem;        /* readable line length for Arabic body copy */
  --page-max: 68rem;
}

@keyframes fq-rise  { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes fq-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}