/* ==========================================================================
   COURTYARD — Shukr Center Design System
   tokens.css · custom properties, light + dark
   --------------------------------------------------------------------------
   Two tiers. Components may only ever reference tier 2 (semantic roles).
   The dark blocks re-point tokens ONLY — never put a component selector in them.
   ========================================================================== */

/* --- 1. PRIMITIVE TOKENS (raw palette — never used directly in components) --- */
:root {
  /* Harbor Blue — primary. Ocean, sky, calm institution. Anchor = 600 (#2D5A98) */
  --color-harbor-50:  #F2F6FB;
  --color-harbor-100: #E1EBF6;
  --color-harbor-200: #C4D7EC;
  --color-harbor-300: #9BBADD;
  --color-harbor-400: #6B96C9;
  --color-harbor-500: #4676B2;
  --color-harbor-600: #2D5A98;
  --color-harbor-700: #24487A;
  --color-harbor-800: #1E3A61;
  --color-harbor-900: #1A3050;
  --color-harbor-950: #101E33;

  /* Clay — secondary. Mizner roof tile, hospitality, giving. Anchor = 600 */
  --color-clay-50:  #FDF5F1;
  --color-clay-100: #FAE7DD;
  --color-clay-200: #F3CDBB;
  --color-clay-300: #E8AB8E;
  --color-clay-400: #D98561;
  --color-clay-500: #C4633C;
  --color-clay-600: #A85231;
  --color-clay-700: #8A4228;
  --color-clay-800: #6E3521;
  --color-clay-900: #582C1D;
  --color-clay-950: #33170F;

  /* Palm — tertiary. Frond green: growth, youth, learning, gardens. */
  --color-palm-50:  #F1F7F4;
  --color-palm-100: #DDEBE4;
  --color-palm-200: #BCD7C9;
  --color-palm-300: #91BAA6;
  --color-palm-400: #629880;
  --color-palm-500: #467F66;
  --color-palm-600: #37705A;
  --color-palm-700: #2C5A48;
  --color-palm-800: #24483A;
  --color-palm-900: #1E3B30;
  --color-palm-950: #10221B;

  /* Sand — highlight. Afternoon light, gratitude, Eid & celebration. Sparing. */
  --color-sand-50:  #FCF8EE;
  --color-sand-100: #F8EFD6;
  --color-sand-200: #F0DDAC;
  --color-sand-300: #E4C377;
  --color-sand-400: #D6A94E;
  --color-sand-500: #C4933A;
  --color-sand-600: #B8862E;
  --color-sand-700: #966C25;
  --color-sand-800: #77551F;
  --color-sand-900: #61461C;
  --color-sand-950: #38270E;

  /* Limestone — warm neutrals. Coquina, stucco, sea-worn shell.
     Hue-biased warm on purpose: a cool grey would make the whole site read SaaS. */
  --color-limestone-0:   #FFFFFF;
  --color-limestone-25:  #FCFAF7;
  --color-limestone-50:  #F8F5F0;
  --color-limestone-100: #F1ECE4;
  --color-limestone-200: #E4DDD2;
  --color-limestone-300: #D0C7B9;
  --color-limestone-400: #A99F8F;
  --color-limestone-500: #837A6C;
  --color-limestone-600: #6E665A;
  --color-limestone-700: #4D4840;
  --color-limestone-800: #37332D;
  --color-limestone-900: #23211D;
  --color-limestone-950: #14130F;

  /* Semantic hues — deliberately shifted away from the brand hues so a
     status colour can never be mistaken for a brand colour. */
  --color-success-50:  #EDF7F1;  --color-success-100: #D3EBDD;
  --color-success-500: #1E9660;  --color-success-600: #17794A;
  --color-success-700: #125E39;
  --color-warning-50:  #FDF6E7;  --color-warning-100: #F9E7BE;
  --color-warning-500: #D08F26;  --color-warning-600: #B7791F;
  --color-warning-700: #8F5E14;
  --color-error-50:    #FCF0EF;  --color-error-100: #F7D8D6;
  --color-error-500:   #CC3B36;  --color-error-600: #B32D2E;
  --color-error-700:   #8E2325;
  --color-info-50:     #ECF5F9;  --color-info-100:  #CDE6F0;
  --color-info-500:    #2A87AA;  --color-info-600:  #1F6F8F;
  --color-info-700:    #185771;
}

/* --- 2. SEMANTIC TOKENS — LIGHT (the default; this is what components use) --- */
:root {
  --bg-canvas:          var(--color-limestone-25);
  --bg-subtle:          var(--color-limestone-50);
  --bg-sunken:          var(--color-limestone-100);
  --bg-inverse:         var(--color-harbor-950);
  --bg-brand:           var(--color-harbor-600);
  --bg-brand-subtle:    var(--color-harbor-50);
  --bg-accent-subtle:   var(--color-clay-50);
  --bg-scrim:           rgba(26, 48, 80, 0.60);

  --surface-default:    var(--color-limestone-0);
  --surface-raised:     var(--color-limestone-0);
  --surface-sunken:     var(--color-limestone-50);
  --surface-overlay:    var(--color-limestone-0);
  --surface-inverse:    var(--color-harbor-900);

  --text-primary:       var(--color-limestone-900);
  --text-secondary:     var(--color-limestone-700);
  --text-muted:         var(--color-limestone-600);
  --text-placeholder:   var(--color-limestone-600);
  --text-disabled:      var(--color-limestone-400);
  --text-inverse:       var(--color-limestone-50);
  --text-on-brand:      #FFFFFF;
  --text-brand:         var(--color-harbor-700);
  --text-accent:        var(--color-clay-700);
  --text-link:          var(--color-harbor-700);
  --text-link-hover:    var(--color-harbor-800);

  --border-subtle:      var(--color-limestone-200);
  --border-default:     var(--color-limestone-300);
  --border-strong:      var(--color-limestone-400);
  --border-brand:       var(--color-harbor-600);
  --border-focus:       var(--color-harbor-600);
  --border-inverse:     rgba(255,255,255,0.16);

  --shadow-color:       35 33 29;    /* warm ink, never pure black */
  --shadow-xs:  0 1px 2px rgb(var(--shadow-color) / 0.06);
  --shadow-sm:  0 1px 2px rgb(var(--shadow-color) / 0.05), 0 2px 6px rgb(var(--shadow-color) / 0.05);
  --shadow-md:  0 2px 4px rgb(var(--shadow-color) / 0.04), 0 6px 14px rgb(var(--shadow-color) / 0.07);
  --shadow-lg:  0 4px 8px rgb(var(--shadow-color) / 0.04), 0 14px 28px rgb(var(--shadow-color) / 0.09);
  --shadow-xl:  0 8px 16px rgb(var(--shadow-color) / 0.05), 0 28px 56px rgb(var(--shadow-color) / 0.12);
  --shadow-2xl: 0 24px 72px rgb(var(--shadow-color) / 0.18);
  --shadow-focus: 0 0 0 3px rgb(45 90 152 / 0.32);
  --shadow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.55);

  /* Tint pairs — every "soft background + colored text" combination in the system.
     Tokenised so badges, alerts and callouts resolve correctly in BOTH themes. */
  --tint-brand-bg: var(--color-harbor-100);   --tint-brand-fg: var(--color-harbor-800);
  --tint-palm-bg:  var(--color-palm-100);     --tint-palm-fg:  var(--color-palm-800);
  --tint-clay-bg:  var(--color-clay-100);     --tint-clay-fg:  var(--color-clay-800);
  --tint-sand-bg:  var(--color-sand-100);     --tint-sand-fg:  var(--color-sand-900);
  --tint-success-bg: var(--color-success-50); --tint-success-fg: var(--color-success-700); --tint-success-line: var(--color-success-600);
  --tint-warning-bg: var(--color-warning-50); --tint-warning-fg: var(--color-warning-700); --tint-warning-line: var(--color-warning-600);
  --tint-error-bg:   var(--color-error-50);   --tint-error-fg:   var(--color-error-700);   --tint-error-line:   var(--color-error-600);
  --tint-info-bg:    var(--color-info-50);    --tint-info-fg:    var(--color-info-700);    --tint-info-line:    var(--color-info-600);
  --code-bg: var(--color-harbor-950);         --code-fg: var(--color-limestone-100);
}

/* --- 3. SEMANTIC TOKENS — DARK ---
   Two selectors, same body: the media query covers viewers on "system",
   the attribute covers an explicit toggle. Neither block styles a component
   directly — they only re-point tokens. --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas:        #0F1520;
    --bg-subtle:        #131A26;
    --bg-sunken:        #0B0F17;
    --bg-inverse:       var(--color-limestone-50);
    --bg-brand:         var(--color-harbor-500);
    --bg-brand-subtle:  #17243A;
    --bg-accent-subtle: #2A1710;
    --bg-scrim:         rgba(8, 12, 20, 0.72);

    --surface-default:  #171E2A;
    --surface-raised:   #1E2735;
    --surface-sunken:   #101724;
    --surface-overlay:  #1E2735;
    --surface-inverse:  var(--color-limestone-50);

    --text-primary:     #EDE8E0;
    --text-secondary:   #C4BDB2;
    --text-muted:       #9A9287;
    --text-placeholder: #9A9287;
    --text-disabled:    #5D5951;
    --text-inverse:     var(--color-limestone-900);
    --text-on-brand:    #FFFFFF;
    --text-brand:       var(--color-harbor-300);
    --text-accent:      var(--color-clay-300);
    --text-link:        var(--color-harbor-300);
    --text-link-hover:  var(--color-harbor-200);

    --border-subtle:    #262F3E;
    --border-default:   #334052;
    --border-strong:    #4A5A70;
    --border-brand:     var(--color-harbor-400);
    --border-focus:     var(--color-harbor-300);
    --border-inverse:   rgba(0,0,0,0.16);

    --shadow-color:     0 0 0;
    --shadow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.06);
    --shadow-focus:     0 0 0 3px rgb(155 186 221 / 0.38);
    --tint-brand-bg: #1B2C45;   --tint-brand-fg: var(--color-harbor-200);
    --tint-palm-bg:  #163026;   --tint-palm-fg:  var(--color-palm-200);
    --tint-clay-bg:  #35190F;   --tint-clay-fg:  var(--color-clay-200);
    --tint-sand-bg:  #33260E;   --tint-sand-fg:  var(--color-sand-200);
    --tint-success-bg: #10281C; --tint-success-fg: #7FCFA6; --tint-success-line: var(--color-success-500);
    --tint-warning-bg: #2E2210; --tint-warning-fg: #E9C169; --tint-warning-line: var(--color-warning-500);
    --tint-error-bg:   #2E1414; --tint-error-fg:   #F0A3A0; --tint-error-line:   var(--color-error-500);
    --tint-info-bg:    #0F2530; --tint-info-fg:    #8FCDE4; --tint-info-line:    var(--color-info-500);
    --code-bg: #080D15;         --code-fg: var(--color-limestone-100);
  }
}
:root[data-theme="dark"] {
  --bg-canvas:        #0F1520;
  --bg-subtle:        #131A26;
  --bg-sunken:        #0B0F17;
  --bg-inverse:       var(--color-limestone-50);
  --bg-brand:         var(--color-harbor-500);
  --bg-brand-subtle:  #17243A;
  --bg-accent-subtle: #2A1710;
  --bg-scrim:         rgba(8, 12, 20, 0.72);

  --surface-default:  #171E2A;
  --surface-raised:   #1E2735;
  --surface-sunken:   #101724;
  --surface-overlay:  #1E2735;
  --surface-inverse:  var(--color-limestone-50);

  --text-primary:     #EDE8E0;
  --text-secondary:   #C4BDB2;
  --text-muted:       #9A9287;
  --text-placeholder: #9A9287;
  --text-disabled:    #5D5951;
  --text-inverse:     var(--color-limestone-900);
  --text-on-brand:    #FFFFFF;
  --text-brand:       var(--color-harbor-300);
  --text-accent:      var(--color-clay-300);
  --text-link:        var(--color-harbor-300);
  --text-link-hover:  var(--color-harbor-200);

  --border-subtle:    #262F3E;
  --border-default:   #334052;
  --border-strong:    #4A5A70;
  --border-brand:     var(--color-harbor-400);
  --border-focus:     var(--color-harbor-300);
  --border-inverse:   rgba(0,0,0,0.16);

  --shadow-color:     0 0 0;
  --shadow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --shadow-focus:     0 0 0 3px rgb(155 186 221 / 0.38);
  --tint-brand-bg: #1B2C45;   --tint-brand-fg: var(--color-harbor-200);
  --tint-palm-bg:  #163026;   --tint-palm-fg:  var(--color-palm-200);
  --tint-clay-bg:  #35190F;   --tint-clay-fg:  var(--color-clay-200);
  --tint-sand-bg:  #33260E;   --tint-sand-fg:  var(--color-sand-200);
  --tint-success-bg: #10281C; --tint-success-fg: #7FCFA6; --tint-success-line: var(--color-success-500);
  --tint-warning-bg: #2E2210; --tint-warning-fg: #E9C169; --tint-warning-line: var(--color-warning-500);
  --tint-error-bg:   #2E1414; --tint-error-fg:   #F0A3A0; --tint-error-line:   var(--color-error-500);
  --tint-info-bg:    #0F2530; --tint-info-fg:    #8FCDE4; --tint-info-line:    var(--color-info-500);
  --code-bg: #080D15;         --code-fg: var(--color-limestone-100);
}

/* --- 4. TYPE, SPACE, RADIUS, MOTION TOKENS --- */
:root {
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "Noto Naskh Arabic", "Geeza Pro", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fraunces variable-axis presets — the difference between "a serif" and OUR serif */
  --fraunces-display: "opsz" 120, "SOFT" 40, "WONK" 1;
  --fraunces-heading: "opsz" 48,  "SOFT" 32, "WONK" 0;
  --fraunces-small:   "opsz" 20,  "SOFT" 20, "WONK" 0;

  --space-0: 0;      --space-px: 1px;  --space-0-5: 2px;
  --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-14: 56px; --space-16: 64px;
  --space-20: 80px;  --space-24: 96px; --space-28: 112px; --space-32: 128px;
  --space-40: 160px; --space-48: 192px; --space-56: 224px; --space-64: 256px;

  --radius-none: 0;    --radius-xs: 4px;  --radius-sm: 6px;  --radius-md: 10px;
  --radius-lg: 14px;   --radius-xl: 20px; --radius-2xl: 28px; --radius-3xl: 40px;
  --radius-full: 999px;
  /* Signature: the courtyard arch */
  --radius-arch: 999px 999px var(--radius-md) var(--radius-md);
  --radius-arch-soft: 46% 46% var(--radius-lg) var(--radius-lg) / 34% 34% var(--radius-lg) var(--radius-lg);

  --border-0: 0; --border-1: 1px; --border-2: 2px; --border-3: 3px; --border-4: 4px; --border-8: 8px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 340ms;

  --container-max: 1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;
  --measure: 68ch;
}

/* --- 5. TYPE SCALE ---------------------------------------------------------
   Fluid headings clamp between a 375px and a 1280px viewport.
   Body sizes never scale below 16px. --------------------------------------- */
:root {
  --type-display-2xl: clamp(44px, 3.2rem + 2.6vw, 76px);
  --type-display-xl : clamp(40px, 2.9rem + 1.8vw, 60px);
  --type-h1         : clamp(34px, 2.4rem + 1.5vw, 48px);
  --type-h2         : clamp(28px, 2.0rem + 1.0vw, 38px);
  --type-h3         : clamp(24px, 1.8rem + 0.6vw, 30px);
  --type-h4         : clamp(20px, 1.5rem + 0.3vw, 24px);
  --type-h5         : 20px;
  --type-h6         : 18px;
  --type-body-xl    : 20px;
  --type-body-lg    : clamp(17px, 1rem + 0.2vw, 18px);
  --type-body-md    : 16px;
  --type-body-sm    : 14px;
  --type-label-lg   : 15px;
  --type-label-md   : 14px;
  --type-label-sm   : 13px;
  --type-caption    : 13px;
  --type-eyebrow    : 12px;
  --type-button-lg  : 17px;
  --type-button-md  : 16px;
  --type-button-sm  : 14px;
  --type-nav        : 15.5px;
  --type-nav-mobile : 17px;
  --type-quote      : 26px;
  --type-arabic     : 17px;

  --lh-display-2xl: 1.02; --lh-display-xl: 1.05; --lh-h1: 1.08; --lh-h2: 1.15;
  --lh-h3: 1.20;  --lh-h4: 1.28; --lh-h5: 1.35; --lh-h6: 1.45;
  --lh-body-xl: 1.62; --lh-body-lg: 1.65; --lh-body-md: 1.70; --lh-body-sm: 1.60;
  --lh-label: 1.30;  --lh-caption: 1.50; --lh-button: 1.00; --lh-arabic: 1.90;

  --tracking-display-2xl: -0.03em; --tracking-display-xl: -0.025em;
  --tracking-h1: -0.02em;  --tracking-h2: -0.018em; --tracking-h3: -0.012em;
  --tracking-h4: -0.008em; --tracking-h5: -0.004em; --tracking-h6: 0;
  --tracking-body: 0;      --tracking-label: 0.01em; --tracking-eyebrow: 0.14em;
  --tracking-button: 0.005em; --tracking-nav: -0.004em;

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

  /* Breakpoints — for reference; @media cannot consume custom properties. */
  --breakpoint-xs: 0px;    --breakpoint-sm: 480px;  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px;

  /* Responsive spacing — override these three per breakpoint in your build. */
  --section-padding: var(--space-14);   /* 56px mobile  → 80px tablet → 112px desktop */
  --container-padding: var(--space-5);  /* 20px mobile  → 32px tablet → 40px desktop  */
  --grid-gap: var(--space-4);           /* 16px mobile  → 24px tablet → 32px desktop  */
}
@media (min-width: 768px) {
  :root { --section-padding: var(--space-20); --container-padding: var(--space-8); --grid-gap: var(--space-6); }
}
@media (min-width: 1024px) {
  :root { --section-padding: var(--space-28); --container-padding: var(--space-10); --grid-gap: var(--space-8); }
}