/*
 * Design Tokens — Puzzle Solutions
 * All visual constants defined here. No hardcoded values in other CSS files.
 *
 * Three-tier token system:
 *   Tier 1: Primitives  — raw values (colors, sizes, weights)
 *   Tier 2: Semantic    — purpose-based aliases (what something IS used for)
 *   Tier 3: Component   — component-level tokens (nav, buttons, sections)
 */


/* ==========================================================================
   TIER 1: PRIMITIVE TOKENS
   Raw values — the source of truth for every design decision.
   ========================================================================== */

:root {

  /* -----------------------------------------------------------------------
     Colors
     Brand palette adapted from PuzzleSite for a technical solutions company.
     ----------------------------------------------------------------------- */

  /* Blue — primary brand color */
  --color-blue-500: #229ac8;
  --color-blue-600: #1a7fa8;
  --color-blue-400: #4ab4da;
  --color-blue-100: #e8f4f9;

  /* Accent — warm complementary */
  --color-accent-500: #bd9d88;
  --color-accent-400: #d4b8a8;
  --color-accent-600: #a8876f;

  /* Neutrals */
  --color-neutral-900: #333333;
  --color-neutral-700: #555555;
  --color-neutral-500: #888888;
  --color-neutral-300: #cccccc;
  --color-neutral-200: #eeeeee;
  --color-neutral-100: #f7f7f7;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Status */
  --color-success: #28a745;
  --color-error: #dc3545;

  /* -----------------------------------------------------------------------
     Spacing Scale
     Base unit: 4px. All spacing uses multiples of this unit.
     ----------------------------------------------------------------------- */

  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* -----------------------------------------------------------------------
     Typography
     Cairo loaded from Google Fonts (300, 400, 600, 700 weights).
     Supports both Latin and Arabic scripts.
     ----------------------------------------------------------------------- */

  --font-family-body:    'Cairo', system-ui, sans-serif;
  --font-family-heading: 'Cairo', system-ui, sans-serif;

  /* Font sizes */
  --font-size-xs:   0.75rem;                       /* 12px */
  --font-size-sm:   0.875rem;                      /* 14px */
  --font-size-base: 1rem;                          /* 16px */
  --font-size-lg:   1.125rem;                      /* 18px */
  --font-size-xl:   1.25rem;                       /* 20px */
  --font-size-2xl:  1.5rem;                        /* 24px */
  --font-size-3xl:  clamp(1.75rem, 4vw, 2.25rem);
  --font-size-4xl:  clamp(2rem, 5vw, 3rem);
  --font-size-5xl:  clamp(2.5rem, 6vw, 3.75rem);

  /* Font weights (Cairo supports 300, 400, 600, 700) */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line heights */
  --line-height-tight:   1.2;
  --line-height-snug:    1.4;
  --line-height-base:    1.6;
  --line-height-relaxed: 1.8;

  /* -----------------------------------------------------------------------
     Border Radius
     ----------------------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
     Shadows
     ----------------------------------------------------------------------- */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.15);

  /* -----------------------------------------------------------------------
     Transitions
     ----------------------------------------------------------------------- */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* -----------------------------------------------------------------------
     Z-index Scale
     ----------------------------------------------------------------------- */

  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* -----------------------------------------------------------------------
     Breakpoint References
     Documentation only — CSS custom properties cannot be used in @media
     queries, but these document the intended breakpoints.
     ----------------------------------------------------------------------- */

  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1200px;
}


/* ==========================================================================
   TIER 2: SEMANTIC TOKENS
   Purpose-based aliases — describe what a value IS USED FOR, not what it is.
   All values reference Tier 1 primitives — no raw values here.
   ========================================================================== */

:root {

  /* Brand colors */
  --color-brand-primary:       var(--color-blue-500);
  --color-brand-primary-dark:  var(--color-blue-600);
  --color-brand-primary-light: var(--color-blue-400);
  --color-brand-primary-bg:    var(--color-blue-100);
  --color-brand-accent:        var(--color-accent-500);
  --color-brand-accent-dark:   var(--color-accent-600);
  --color-brand-accent-light:  var(--color-accent-400);

  /* Text */
  --color-text-primary:    var(--color-neutral-900);
  --color-text-secondary:  var(--color-neutral-700);
  --color-text-muted:      var(--color-neutral-500);
  --color-text-inverse:    var(--color-white);
  --color-text-link:       var(--color-brand-primary);
  --color-text-link-hover: var(--color-brand-primary-dark);

  /* Backgrounds and borders */
  --color-bg-page:         var(--color-neutral-100);
  --color-bg-card:         var(--color-white);
  --color-bg-section-alt:  var(--color-white);
  --color-border:          var(--color-neutral-200);
  --color-border-focus:    var(--color-brand-primary);
}


/* ==========================================================================
   TIER 3: COMPONENT TOKENS
   Component-level tokens — specific UI component values.
   All values reference Tier 2 semantic tokens or Tier 1 primitives.
   ========================================================================== */

:root {

  /* Navigation */
  --color-nav-bg:         var(--color-white);
  --color-nav-text:       var(--color-text-primary);
  --color-nav-link-hover: var(--color-brand-primary);
  --nav-height:           72px;

  /* Button — primary */
  --color-btn-primary-bg:    var(--color-brand-primary);
  --color-btn-primary-text:  var(--color-text-inverse);
  --color-btn-primary-hover: var(--color-brand-primary-dark);

  /* Button — secondary (outlined) */
  --color-btn-secondary-bg:     transparent;
  --color-btn-secondary-text:   var(--color-brand-primary);
  --color-btn-secondary-border: var(--color-brand-primary);
  --color-btn-secondary-hover:  var(--color-brand-primary-bg);

  /* Section layout */
  --section-padding-block:        var(--space-20);
  --section-padding-block-mobile: var(--space-12);
}