/*
 * tokens.css
 * Design System — CSS Custom Properties (Almosafer)
 *
 * Generated from: specs/tokens/token-reference.md
 * Foundation sources:
 *   specs/foundations/color.md      — Almosafer teal brand + neutral + status scales
 *   specs/foundations/typography.md — IBM Plex Sans / IBM Plex Sans Arabic, font.size.*, font.weight.*
 *   specs/foundations/spacing.md
 *   specs/foundations/radius.md
 *   specs/foundations/motion.md
 *
 * Rules:
 *   Components consume these variables only.
 *   Do not write raw values in component styles.
 *   Do not edit this file without updating token-reference.md first.
 *   Bilingual font switching is handled via [lang="ar"] / [dir="rtl"] selector.
 *   Light/dark switching is handled via [data-theme="dark"] selector.
 */


/* ============================================================
   COLOR TOKENS — BACKGROUND (Light)
   ============================================================ */

:root {
  --color-background-primary:         #52B69A;   /* brand.500  */
  --color-background-primary-hover:   #479E87;   /* brand.600  */
  --color-background-primary-active:  #3C8674;   /* brand.700  */
  --color-background-default:         #FFFFFF;   /* neutral.0  */
  --color-background-surface:         #FFFFFF;   /* neutral.0  */
  --color-background-subtle:          #F6FAF9;   /* neutral.50 */
  --color-background-sunken:          #F6FAF9;   /* neutral.50 */
  --color-background-inverse:         #0C0C20;   /* neutral.900 */
  --color-background-disabled:        #EAF1EF;   /* neutral.100 */
  --color-background-selected:        #BFE3DB;   /* brand.100   */
  --color-background-danger:          #FFD6D6;   /* status.danger.100  */
  --color-background-warning:         #F9EDBC;   /* status.warning.100 */
  --color-background-success:         #C2EDCC;   /* status.success.100 */
}


/* ============================================================
   COLOR TOKENS — SURFACE (Light)
   ============================================================ */

:root {
  --color-surface-default:   #FFFFFF;   /* neutral.0   */
  --color-surface-subtle:    #EAF1EF;   /* neutral.100 */
}


/* ============================================================
   COLOR TOKENS — TEXT (Light)
   ============================================================ */

:root {
  --color-text-primary:    #0C0C20;   /* neutral.900          */
  --color-text-secondary:  #667A74;   /* neutral.600          */
  --color-text-subtle:     #859C95;   /* neutral.500          */
  --color-text-inverse:    #FFFFFF;   /* neutral.0            */
  --color-text-brand:      #52B69A;   /* brand.500            */
  --color-text-disabled:   #AABEB5;   /* neutral.400          */
  --color-text-danger:     #A81C1E;   /* status.danger.700    */
  --color-text-warning:    #7E6217;   /* status.warning.700   */
  --color-text-success:    #1B5E28;   /* status.success.700   */
}


/* ============================================================
   COLOR TOKENS — BORDER (Light)
   ============================================================ */

:root {
  --color-border-default:   #D5E0DC;   /* neutral.200          */
  --color-border-subtle:    #EAF1EF;   /* neutral.100          */
  --color-border-strong:    #AABEB5;   /* neutral.400          */
  --color-border-focus:     #52B69A;   /* brand.500            */
  --color-border-disabled:  #D5E0DC;   /* neutral.200          */
  --color-border-danger:    #FF6A6B;   /* status.danger.400    */
  --color-border-selected:  #52B69A;   /* brand.500            */
}


/* ============================================================
   COLOR TOKENS — STATUS (Light)
   ============================================================ */

:root {
  --color-status-success:        #2F9E44;   /* status.success.500   */
  --color-status-success-bold:   #1B5E28;   /* status.success.700   */
  --color-status-warning:        #C9A227;   /* status.warning.500   */
  --color-status-warning-bold:   #7E6217;   /* status.warning.700   */
  --color-status-danger:         #FF4D4F;   /* status.danger.500    */
  --color-status-danger-bold:    #A81C1E;   /* status.danger.700    */
  --color-status-info:           #3A86FF;   /* status.info.500      */
}


/* ============================================================
   SPACING TOKENS
   ============================================================ */

:root {
  --spacing-xs:         8px;    /* space-100  */
  --spacing-sm:         16px;   /* space-200  */
  --spacing-md:         24px;   /* space-300  */
  --spacing-lg:         32px;   /* space-400  */
  --spacing-xl:         40px;   /* space-500  */
  --spacing-layout-sm:  48px;   /* space-600  */
  --spacing-layout-md:  64px;   /* space-800  */
  --spacing-layout-lg:  80px;   /* space-1000 */
}


/* ============================================================
   TYPOGRAPHY TOKENS — FONT FAMILY
   font.family resolves through language mode.
   Default: IBM Plex Sans (English / LTR).
   Override: IBM Plex Sans Arabic for [lang="ar"] / [dir="rtl"].
   ============================================================ */

:root {
  --typography-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

[lang="ar"],
[dir="rtl"] {
  --typography-family: "IBM Plex Sans Arabic", "Geeza Pro", "Arial Unicode MS", sans-serif;
}


/* ============================================================
   TYPOGRAPHY TOKENS — FONT WEIGHT
   ============================================================ */

:root {
  --font-weight-regular:    400;   /* font.weight.regular  */
  --font-weight-medium:     500;   /* font.weight.medium   */
  --font-weight-semibold:   600;   /* font.weight.semibold */
  --font-weight-bold:       700;   /* font.weight.bold     */
}


/* ============================================================
   TYPOGRAPHY TOKENS — LINE HEIGHT
   ============================================================ */

:root {
  --line-height-tight:    1.2;
  --line-height-normal:   1.5;
  --line-height-loose:    1.75;
}


/* ============================================================
   TYPOGRAPHY TOKENS — LETTER SPACING
   ============================================================ */

:root {
  --letter-spacing-tight:    -0.01em;
  --letter-spacing-normal:    0;
  --letter-spacing-wide:      0.02em;
}


/* ============================================================
   TEXT STYLE TOKENS
   Each style composes font.family + font.size.* + font.weight.*
   Components reference these variables — never the primitives.
   ============================================================ */

:root {
  /* Sizes — font.size.* */
  --text-caption-size:      10px;   /* font.size.10 */
  --text-body-sm-size:      12px;   /* font.size.12 */
  --text-body-size:         16px;   /* font.size.16 */
  --text-body-md-size:      16px;   /* font.size.16 */
  --text-heading-sm-size:   20px;   /* font.size.20 */
  --text-heading-md-size:   24px;   /* font.size.24 */
  --text-heading-lg-size:   24px;   /* font.size.24 */

  /* Weights — font.weight.* */
  --text-caption-weight:      var(--font-weight-regular);    /* font.weight.regular  */
  --text-body-sm-weight:      var(--font-weight-regular);    /* font.weight.regular  */
  --text-body-weight:         var(--font-weight-regular);    /* font.weight.regular  */
  --text-body-md-weight:      var(--font-weight-medium);     /* font.weight.medium   */
  --text-heading-sm-weight:   var(--font-weight-semibold);   /* font.weight.semibold */
  --text-heading-md-weight:   var(--font-weight-semibold);   /* font.weight.semibold */
  --text-heading-lg-weight:   var(--font-weight-bold);       /* font.weight.bold     */

  /* Line Heights */
  --text-caption-line-height:      var(--line-height-normal);   /* body text rule */
  --text-body-sm-line-height:      var(--line-height-normal);
  --text-body-line-height:         var(--line-height-normal);
  --text-body-md-line-height:      var(--line-height-normal);
  --text-heading-sm-line-height:   var(--line-height-tight);    /* heading rule */
  --text-heading-md-line-height:   var(--line-height-tight);
  --text-heading-lg-line-height:   var(--line-height-tight);
}


/* ============================================================
   RADIUS TOKENS
   ============================================================ */

:root {
  --radius-none:   0px;      /* radius-0    */
  --radius-xs:     2px;      /* radius-50   */
  --radius-sm:     4px;      /* radius-100  */
  --radius-md:     6px;      /* radius-200  */
  --radius-lg:     8px;      /* radius-300  */
  --radius-xl:     12px;     /* radius-400  */
  --radius-2xl:    16px;     /* radius-500  */
  --radius-full:   9999px;   /* radius-full */
}


/* ============================================================
   MOTION TOKENS — DURATION
   ============================================================ */

:root {
  --motion-duration-fast:     100ms;   /* duration-100 */
  --motion-duration-normal:   200ms;   /* duration-200 */
  --motion-duration-slow:     300ms;   /* duration-300 */
  --motion-duration-enter:    200ms;   /* duration-200 */
  --motion-duration-exit:     150ms;   /* duration-150 */
  --motion-duration-layout:   400ms;   /* duration-400 */
}


/* ============================================================
   MOTION TOKENS — EASING
   ============================================================ */

:root {
  --motion-easing-standard:   cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-enter:      cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-exit:       cubic-bezier(0.4, 0, 1, 1);
}


/* ============================================================
   MOTION TOKENS — SHORTHAND
   Usage: transition: opacity var(--motion-fast);
   ============================================================ */

:root {
  --motion-fast:     100ms cubic-bezier(0.2, 0, 0, 1);   /* duration-100 + easing-standard */
  --motion-normal:   200ms cubic-bezier(0.2, 0, 0, 1);   /* duration-200 + easing-standard */
  --motion-slow:     300ms cubic-bezier(0.2, 0, 0, 1);   /* duration-300 + easing-standard */
  --motion-enter:    200ms cubic-bezier(0, 0, 0.2, 1);   /* duration-200 + easing-enter    */
  --motion-exit:     150ms cubic-bezier(0.4, 0, 1, 1);   /* duration-150 + easing-exit     */
  --motion-layout:   400ms cubic-bezier(0, 0, 0.2, 1);   /* duration-400 + easing-enter    */
}


/* ============================================================
   DARK THEME OVERRIDES
   Only color tokens are overridden in dark mode.
   Spacing, typography, radius, and motion remain unchanged.
   ============================================================ */

[data-theme="dark"] {

  /* Background */
  --color-background-primary:         #5CB5A1;   /* brand.400  */
  --color-background-primary-hover:   #52B69A;   /* brand.500  */
  --color-background-primary-active:  #479E87;   /* brand.600  */
  --color-background-default:         #0C0C20;   /* neutral.900 */
  --color-background-surface:         #0C0C20;   /* neutral.900 */
  --color-background-subtle:          #4A5A55;   /* neutral.700 */
  --color-background-sunken:          #2F3A37;   /* neutral.800 */
  --color-background-inverse:         #FFFFFF;   /* neutral.0   */
  --color-background-disabled:        #4A5A55;   /* neutral.700 */
  --color-background-selected:        #316E61;   /* brand.800   */
  --color-background-danger:          #FFB3B4;   /* status.danger.200  */
  --color-background-warning:         #F4DF8A;   /* status.warning.200 */
  --color-background-success:         #96DFA9;   /* status.success.200 */

  /* Surface */
  --color-surface-default:   #2F3A37;   /* neutral.800 */
  --color-surface-subtle:    #4A5A55;   /* neutral.700 */

  /* Text */
  --color-text-primary:    #EAF1EF;   /* neutral.100 */
  --color-text-secondary:  #AABEB5;   /* neutral.400 */
  --color-text-subtle:     #AABEB5;   /* neutral.400 */
  --color-text-inverse:    #0C0C20;   /* neutral.900 */
  --color-text-brand:      #73C0AF;   /* brand.300   */
  --color-text-disabled:   #667A74;   /* neutral.600 */
  --color-text-danger:     #FF6A6B;   /* status.danger.400  */
  --color-text-warning:    #DEB82C;   /* status.warning.400 */
  --color-text-success:    #45BE65;   /* status.success.400 */

  /* Border */
  --color-border-default:   #4A5A55;   /* neutral.700 */
  --color-border-subtle:    #2F3A37;   /* neutral.800 */
  --color-border-strong:    #859C95;   /* neutral.500 */
  --color-border-focus:     #5CB5A1;   /* brand.400   */
  --color-border-disabled:  #4A5A55;   /* neutral.700 */
  --color-border-danger:    #FF6A6B;   /* status.danger.400  */
  --color-border-selected:  #5CB5A1;   /* brand.400   */

  /* Status */
  --color-status-success:        #96DFA9;   /* status.success.200 */
  --color-status-success-bold:   #45BE65;   /* status.success.400 */
  --color-status-warning:        #F4DF8A;   /* status.warning.200 */
  --color-status-warning-bold:   #DEB82C;   /* status.warning.400 */
  --color-status-danger:         #FFB3B4;   /* status.danger.200  */
  --color-status-danger-bold:    #FF6A6B;   /* status.danger.400  */
  --color-status-info:           #9DC3FF;   /* status.info.200    */
}


/* ============================================================
   REDUCED MOTION
   Overrides all motion tokens when user prefers reduced motion.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:     0ms linear;
    --motion-normal:   0ms linear;
    --motion-slow:     0ms linear;
    --motion-enter:    0ms linear;
    --motion-exit:     0ms linear;
    --motion-layout:   0ms linear;

    --motion-duration-fast:     0ms;
    --motion-duration-normal:   0ms;
    --motion-duration-slow:     0ms;
    --motion-duration-enter:    0ms;
    --motion-duration-exit:     0ms;
    --motion-duration-layout:   0ms;
  }
}