/* =========================================================
   ALPEKIN DESIGN TOKENS
   ---------------------------------------------------------
   Purpose:
   This file is the single source of truth for the visual
   system of Alpekin.

   Rules:
   - Keep raw brand colors unchanged unless the brand palette
     officially changes.
   - Components and page CSS should use semantic tokens where
     possible, not raw colors directly.
   - This file should contain variables only.
   - Do not place real component selectors here.
   ========================================================= */


:root {
  color-scheme: light;
  /* =========================================================
     1. RAW BRAND COLORS
     ---------------------------------------------------------
     These are the official Alpekin color primitives.
     They represent the earthy, premium, old-world, nature-based
     identity of the brand.
     ========================================================= */

  --ivory-bone: #e3d3a7;
  --alpine-green: #5e6c3b;
  --burnt-clay: #8d4f35;
  --oxidized-bronze: #926e33;
  --tree-gold: #c6a14f;
  --dark-soil: #2c2116;
  --cleansing-blue-gray: #a2b1b8;
  --moon-ash: #d8d2ca;
  --sacred-copper: #b76e2d;
  --ritual-fire-glow: #c7513a;
  --deep-moss: #3e4d34;
  --bone-black: #1c1c1c;


  /* =========================================================
     2. SEMANTIC COLOR SYSTEM
     ---------------------------------------------------------
     Semantic tokens translate raw brand colors into UI roles.
     Use these in most CSS files instead of raw color names.
     ========================================================= */

  --color-ground: var(--dark-soil);
  --color-forest: var(--deep-moss);
  --color-gold: var(--tree-gold);
  --color-bone: var(--ivory-bone);
  --color-ash: var(--moon-ash);
  --color-copper: var(--sacred-copper);
  --color-clay: var(--burnt-clay);

  /* Primary surfaces. These aliases are switched for the public theme. */
  --surface: var(--bone-black);
  --surface-forest: var(--deep-moss);
  --surface-elevated: var(--dark-soil);
  --surface-paper: color-mix(in srgb, var(--moon-ash) 72%, var(--ivory-bone));
  --surface-clean: color-mix(in srgb, var(--moon-ash) 88%, var(--ivory-bone));
  --surface-muted: color-mix(in srgb, var(--ivory-bone) 72%, var(--moon-ash));

  /* Text roles */
  --text: var(--ivory-bone);
  --text-inverse: var(--dark-soil);
  --text-strong: var(--dark-soil);
  --text-muted: color-mix(in srgb, var(--ivory-bone) 72%, transparent);
  --text-muted-dark: color-mix(in srgb, var(--dark-soil) 72%, var(--cleansing-blue-gray));

  /* Accent roles */
  --accent-primary: var(--burnt-clay);
  --accent-secondary: var(--sacred-copper);
  --accent-highlight: var(--tree-gold);
  --accent-earth: var(--burnt-clay);
  --accent-cool: var(--cleansing-blue-gray);
  --text-on-highlight: var(--dark-soil);
  --link: color-mix(in srgb, var(--burnt-clay) 80%, var(--bone-black));
  --link-hover: color-mix(in srgb, var(--sacred-copper) 55%, var(--bone-black));
  --link-on-dark: color-mix(in srgb, var(--tree-gold) 60%, var(--ivory-bone));
  --link-on-dark-hover: var(--ivory-bone);

  /* Border roles */
  --border: color-mix(in srgb, var(--deep-moss) 26%, transparent);
  --border-dark: color-mix(in srgb, var(--deep-moss) 42%, transparent);
  --border-gold-soft: color-mix(in srgb, var(--tree-gold) 38%, transparent);
  --control-border: color-mix(in srgb, var(--dark-soil) 55%, transparent);
  --control-border-hover: color-mix(in srgb, var(--dark-soil) 72%, transparent);

  /* System status colors */
  --status-success: var(--alpine-green);
  --status-warning: var(--oxidized-bronze);
  --status-danger: var(--ritual-fire-glow);
  --status-danger-text: var(--link);
  --status-info: var(--cleansing-blue-gray);


  /* =========================================================
     3. TYPOGRAPHY TOKENS
     ---------------------------------------------------------
     Alpekin uses an editorial premium serif system:
     - EB Garamond: headings, titles, ceremonial emphasis.
     - Lora: body, forms, long reading, UI text.
     ========================================================= */

  --font-heading-latin: "EB Garamond", Georgia, serif;
  --font-body-latin: "Lora", Georgia, serif;
  --font-heading-arabic: "Amiri", serif;
  --font-body-arabic: "Noto Naskh Arabic", serif;

  --font-heading: var(--font-heading-latin);
  --font-body: var(--font-body-latin);

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

  --fs-2xs: 0.75rem;
  --fs-xs: 0.875rem;
  --fs-small: 1rem;
  --fs-body: 1.25rem;
  --fs-lead: 1.375rem;

  --fs-h6: 1.125rem;
  --fs-h5: 1.25rem;
  --fs-h4: 1.5rem;
  --fs-h3: 1.875rem;
  --fs-h2: 2.5rem;
  --fs-h1: 3.25rem;
  --fs-article-title: 4rem;
  --fs-display-lg: clamp(2.75rem, 6vw, 5.65rem);
  --fs-display-xl: clamp(3.25rem, 7vw, 6.75rem);

  /* Fluid sizes support responsive editorial layouts. */
  --fs-fluid-body: clamp(1.0625rem, 0.4vw + 1rem, var(--fs-body));
  --fs-fluid-h1: clamp(2.45rem, 4vw, var(--fs-h1));
  --fs-fluid-h2: clamp(2rem, 3vw, var(--fs-h2));
  --fs-fluid-h3: clamp(1.55rem, 2vw, var(--fs-h3));

  --lh-tight: 1.15;
  --lh-display: 0.98;
  --lh-heading: 1.22;
  --lh-body: 1.7;
  --lh-loose: 1.85;

  --ls-body: 0.003em;
  --ls-heading-tight: -0.01em;
  --ls-wide: 0.06em;
  --ls-kicker: 0.12em;
  --text-case-label: uppercase;

  /* Component-related typography boundaries */
  --fs-section-title-min: 1.75rem;
  --fs-section-title-max: 2.35rem;
  --fs-card-title-min: 1.15rem;
  --fs-card-title-max: 1.4rem;
  --fs-card-body-min: 1rem;
  --fs-card-body-max: 1.15rem;
  --fs-utility-min: 0.875rem;
  --fs-utility-max: 1rem;
  --fs-primary-min: 1.05rem;
  --fs-primary-max: 1.5rem;

  /* Compact typography for editorial discovery controls. */
  --fs-editorial-label: var(--fs-2xs);
  --fs-editorial-control: var(--fs-xs);


  /* =========================================================
     4. SPACING RHYTHM
     ---------------------------------------------------------
     4px-based scale. This keeps the interface structured,
     calm, repeatable, and aligned with the brand idea of rhythm.
     ========================================================= */

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --space-13: 7.5rem;
  --space-14: 9rem;


  /* =========================================================
     5. LAYOUT TOKENS
     ---------------------------------------------------------
     Used by layout.css and page-specific files.
     The content measure supports readable Journal/articles.
     ========================================================= */

  --container-max: 1200px;
  --container-wide: 1440px;
  --container-narrow: 900px;

  --content-measure: 65ch;
  --content-measure-narrow: 52ch;
  --content-measure-wide: 78ch;

  --container-pad-inline: var(--space-7);
  --container-pad-inline-tablet: var(--space-6);
  --container-pad-inline-mobile: var(--space-4);

  --section-padding-block: var(--space-11);
  --section-padding-block-tight: var(--space-8);
  --section-padding-block-spacious: var(--space-13);


  /* =========================================================
     6. RADIUS, BORDERS, ELEVATION
     ---------------------------------------------------------
     Rounded but not playful. Premium, restrained, structured.
     ========================================================= */

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-interactive: var(--radius-md);

  --border-width: 1px;
  --border-width-strong: 2px;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.13);
  --shadow-xl: 0 22px 56px rgba(0, 0, 0, 0.18);
  --shadow-footer: 0 -4px 18px rgba(0, 0, 0, 0.2);

  --elevation-sm: var(--shadow-sm);
  --elevation-md: var(--shadow-md);
  --elevation-lg: var(--shadow-lg);
  --elevation-xl: var(--shadow-xl);


  /* =========================================================
     7. MOTION
     ---------------------------------------------------------
     Motion should feel precise and calm. Avoid flashy effects.
     ========================================================= */

  --duration-fast: 120ms;
  --duration-standard: 200ms;
  --duration-slow: 320ms;

  --ease-standard: 200ms ease;
  --ease-slow: 320ms ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);


  /* =========================================================
     8. FOCUS, OVERLAY, OPACITY
     ---------------------------------------------------------
     Accessibility and interface layering helpers.
     ========================================================= */

  --focus-color: color-mix(in srgb, var(--burnt-clay) 80%, var(--bone-black));
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-color) 32%, transparent);
  --focus-outline: 2px solid var(--focus-color);

  --opacity-disabled: 0.45;
  --opacity-muted: 0.72;
  --opacity-overlay: 0.75;

  --overlay-scrim: rgba(0, 0, 0, var(--opacity-overlay));
  --print-ink: var(--bone-black);
  --print-paper: var(--ivory-bone);

  --grad-gold-copper: linear-gradient(90deg, var(--tree-gold), var(--sacred-copper));
  --grad-earth-forest: linear-gradient(135deg, var(--dark-soil), var(--deep-moss));

  --accent-gold-ring: var(--focus-ring);
  --accent-gold-glow: 0 0 14px rgba(198, 161, 79, 0.22);


  /* =========================================================
     9. COMPONENT TOKENS
     ---------------------------------------------------------
     Shared sizing values for buttons, inputs, tables, header.
     Components themselves are defined in components.css.
     ========================================================= */

  --btn-font-weight: var(--weight-semibold);
  --btn-radius: var(--radius-md);
  --btn-padding-y: 0.75rem;
  --btn-padding-x: 1.25rem;
  --btn-padding-y-sm: 0.55rem;
  --btn-padding-x-sm: 0.9rem;
  --btn-padding-y-lg: 0.95rem;
  --btn-padding-x-lg: 1.55rem;
  --btn-gap: 0.625rem;

  --input-radius: var(--radius-md);
  --input-padding-y: 0.75rem;
  --input-padding-x: 0.875rem;
  --input-border-width: 1px;

  --table-row-padding-y: 0.75rem;
  --table-row-padding-x: 1rem;
  --table-radius: var(--radius-md);

  --header-padding-y: 0.6rem;
  --header-padding-x: 1rem;

  --logo-size-desktop: 60px;
  --logo-size-tablet: 52px;
  --logo-size-mobile: 48px;

  --cluster-gap-desktop: var(--space-5);
  --cluster-gap-tablet: var(--space-4);
  --cluster-gap-mobile: var(--space-2);

  --header-row-gap-desktop: var(--space-5);
  --header-row-gap-mobile: var(--space-3);

  --divider-thickness: 1px;
  --divider-height-desktop: 20px;
  --divider-height-mobile: 0px;

  --touch-min: 44px;


  /* =========================================================
     10. SAFE AREA, LAYERS, BREAKPOINT REFERENCES
     ---------------------------------------------------------
     Breakpoint variables are references only. CSS variables
     cannot be used directly inside media query conditions.
     ========================================================= */

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --z-base: 0;
  --z-header: 10;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;

  --bp-xs: 360px;
  --bp-sm: 400px;
  --bp-md: 480px;
  --bp-lg: 640px;
  --bp-tablet: 768px;
  --bp-xl: 1024px;
  --bp-2xl: 1280px;
}

/* Arabic and Persian need different type metrics and no Latin casing/tracking. */
:root:lang(ar),
:root:lang(fa) {
  --font-heading: var(--font-heading-arabic);
  --font-body: var(--font-body-arabic);
  --fs-display-lg: clamp(2.5rem, 5.5vw, 5rem);
  --fs-display-xl: clamp(2.75rem, 6.4vw, 5.75rem);
  --lh-tight: 1.3;
  --lh-display: 1.3;
  --lh-heading: 1.38;
  --lh-body: 1.9;
  --lh-loose: 2;
  --ls-body: 0;
  --ls-heading-tight: 0;
  --ls-wide: 0;
  --ls-kicker: 0;
  --text-case-label: none;
}

/* Dark mode changes semantic roles only; raw brand colors remain constant. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface: var(--bone-black);
  --surface-elevated: var(--dark-soil);
  --surface-paper: color-mix(in srgb, var(--bone-black) 82%, var(--dark-soil));
  --surface-clean: color-mix(in srgb, var(--dark-soil) 82%, var(--deep-moss));
  --surface-muted: color-mix(in srgb, var(--deep-moss) 72%, var(--dark-soil));

  --text-inverse: var(--ivory-bone);
  --text-strong: var(--ivory-bone);
  --text-muted-dark: color-mix(in srgb, var(--ivory-bone) 72%, var(--cleansing-blue-gray));

  --accent-primary: var(--tree-gold);
  --accent-secondary: var(--sacred-copper);
  --link: color-mix(in srgb, var(--tree-gold) 65%, var(--ivory-bone));
  --link-hover: var(--ivory-bone);

  --border: color-mix(in srgb, var(--ivory-bone) 22%, transparent);
  --border-dark: color-mix(in srgb, var(--ivory-bone) 34%, transparent);
  --border-gold-soft: color-mix(in srgb, var(--tree-gold) 48%, transparent);
  --control-border: color-mix(in srgb, var(--ivory-bone) 48%, transparent);
  --control-border-hover: color-mix(in srgb, var(--ivory-bone) 68%, transparent);
  --focus-color: var(--ivory-bone);
  --status-danger-text: color-mix(in srgb, var(--ritual-fire-glow) 55%, var(--ivory-bone));
}

:root[data-theme="light"] {
  color-scheme: light;
}