/* ==========================================================================
   Queijada da Sapa — Design Tokens
   Vintage/classic aesthetic for a traditional Portuguese pastry shop in Sintra
   ==========================================================================
   File: tokens.css
   Purpose: Single source of truth for all design tokens as CSS custom properties.
   Consumption: Import in your root CSS file via @import './tokens.css'.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BREAKPOINTS (for reference — use in CSS media queries, not as custom props)
   Mobile-first: sm ≥640px | md ≥768px | lg ≥1024px | xl ≥1280px
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. COLOR PALETTE
   Strategy: COMMITTED — warm terracotta carries ~40% of surfaces.
   Tinted neutrals leaning warm (ochre undertone).
   OKLCH for perceptual uniformity — hex fallbacks for iPadOS 16 Safari compat.
   -------------------------------------------------------------------------- */

/* stylelint-disable declaration-block-no-duplicate-custom-properties */

:root {
  /* --- Primary: Terracotta (the hero color) --- */
  --color-primary-50:   #fee9e2;
  --color-primary-100:  #f7d6ca;
  --color-primary-200:  #e5b9aa;
  --color-primary-300:  #c99786;
  --color-primary-400:  #ae7764;
  --color-primary-500:  #905845;
  --color-primary-600:  #784634;
  --color-primary-700:  #603627;
  --color-primary-800:  #492a1f;
  --color-primary-900:  #351d15;

  /* --- Secondary: Deep warm brown (earthy, grounded) --- */
  --color-secondary-50:   #f3e9e1;
  --color-secondary-100:  #dacbbd;
  --color-secondary-200:  #b2a191;
  --color-secondary-300:  #8f7c6b;
  --color-secondary-400:  #6f5947;
  --color-secondary-500:  #543c2d;
  --color-secondary-600:  #442d20;
  --color-secondary-700:  #321e16;
  --color-secondary-800:  #22110b;
  --color-secondary-900:  #130806;

  /* --- Accent: Burnished gold (ceremonial, premium) --- */
  --color-accent-50:   #fbf1dc;
  --color-accent-100:  #ecdcbd;
  --color-accent-200:  #d5c29c;
  --color-accent-300:  #c1ab7f;
  --color-accent-400:  #ac9566;
  --color-accent-500:  #b19c70;
  --color-accent-600:  #917e56;
  --color-accent-700:  #72613e;
  --color-accent-800:  #53462b;
  --color-accent-900:  #362d19;

  /* --- Warm neutrals (cream-to-charcoal, tinted toward ochre) --- */
  --color-neutral-50:   #fcfaf6;   /* Warm white — page background */
  --color-neutral-100:  #f6f3ee;   /* Card surface */
  --color-neutral-150:  #f0ece5;   /* Slightly warmer */
  --color-neutral-200:  #e8e4dd;
  --color-neutral-300:  #d2cdc5;
  --color-neutral-400:  #a59d95;
  --color-neutral-500:  #787069;
  --color-neutral-600:  #524c47;
  --color-neutral-700:  #37322e;
  --color-neutral-800:  #1e1a17;
  --color-neutral-900:  #0b0908;   /* Near-black text */
  --color-neutral-950:  #040303;   /* Rich dark — never pure black */

  /* --- Semantic roles --- */
  --color-text-primary:     var(--color-neutral-950);
  --color-text-secondary:   var(--color-neutral-600);
  --color-text-muted:       var(--color-neutral-400);
  --color-text-inverse:     var(--color-neutral-50);

  --color-surface:          var(--color-neutral-50);
  --color-surface-elevated: var(--color-neutral-100);
  --color-surface-raised:   #fdfcf9;   /* Slightly lighter than 50 */
  --color-surface-dark:     var(--color-secondary-800);

  --color-border:           var(--color-neutral-200);
  --color-border-light:     #f0eeeb;

  --color-error:            #a43b38;
  --color-error-bg:         #ffdedb;
  --color-success:          #49814c;
  --color-success-bg:       #d8efd8;
  --color-warning:          #b58629;
  --color-warning-bg:       #fae9ce;
  --color-info:             #42789c;
  --color-info-bg:          #d3e8f7;

  /* Anchor / link */
  --color-link:             var(--color-primary-600);
  --color-link-hover:       var(--color-primary-700);
  --color-link-visited:     var(--color-secondary-500);

  /* Focus ring */
  --color-focus-ring:       var(--color-accent-400);

  /* Gradient — optional, for hero overlays (hex fallback) */
  --gradient-hero:          linear-gradient(180deg, rgba(4, 3, 3, 0.60) 0%, rgba(4, 3, 3, 0.30) 100%);
  --gradient-warm:          linear-gradient(135deg, rgba(254, 233, 226, 0.15) 0%, rgba(251, 241, 220, 0.10) 100%);

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   Headings: Playfair Display — classic serif, high contrast, old-world elegance
   Body:     Lato — clean, warm sans-serif, excellent readability
   Pairing rationale: Playfair Display evokes 18th-century Portuguese typography
   (think azulejo tile inscriptions). Lato provides a neutral, warm foil.
   -------------------------------------------------------------------------- */

  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Type scale — modular scale 1.25 (major third) */
  --text-xs:       0.75rem;     /* 12px */
  --text-sm:       0.875rem;    /* 14px */
  --text-base:     1rem;        /* 16px */
  --text-lg:       1.125rem;    /* 18px */
  --text-xl:       1.25rem;     /* 20px */
  --text-2xl:      1.5rem;      /* 24px */
  --text-3xl:      1.875rem;    /* 30px */
  --text-4xl:      2.25rem;     /* 36px */
  --text-5xl:      3rem;        /* 48px */
  --text-6xl:      3.75rem;     /* 60px */
  --text-7xl:      4.5rem;      /* 72px */

  /* Line-height scale */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   2;

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Default pairings */
  --heading-line-height: var(--leading-tight);
  --body-line-height:    var(--leading-relaxed);
  --body-max-width:      70ch;

/* --------------------------------------------------------------------------
   4. SPACING SCALE (4px base)
   space-{n} where n = number of 4px increments ×4.
   -------------------------------------------------------------------------- */

  --space-0:   0;
  --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-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-18:  4.5rem;    /* 72px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */

  /* Section padding defaults */
  --section-padding-y:  var(--space-12);    /* 48px desktop */
  --section-padding-y-sm: var(--space-8);   /* 32px mobile */
  --page-max-width:     80rem;              /* 1280px — readable max */

/* --------------------------------------------------------------------------
   5. BORDER RADIUS
   Subtle radii — nothing competes with the content.
   -------------------------------------------------------------------------- */

  --radius-none:    0;
  --radius-sm:      0.25rem;   /*  4px */
  --radius-md:      0.5rem;    /*  8px */
  --radius-lg:      0.75rem;   /* 12px */
  --radius-xl:      1rem;      /* 16px */
  --radius-full:    9999px;    /* pill shape */

/* --------------------------------------------------------------------------
   6. SHADOWS
   Warm-tinted shadows for depth. Never pure black shadows — always tinted
   toward the brand hue (terracotta/brown at very low opacity).
   Hex fallbacks for iPadOS 16 Safari compatibility.
   -------------------------------------------------------------------------- */

  --shadow-sm:      0 1px 2px rgba(40, 30, 25, 0.06);
  --shadow-md:      0 4px 6px -1px rgba(40, 30, 25, 0.08), 0 2px 4px -2px rgba(40, 30, 25, 0.05);
  --shadow-lg:      0 10px 15px -3px rgba(40, 30, 25, 0.10), 0 4px 6px -4px rgba(40, 30, 25, 0.05);
  --shadow-xl:      0 20px 25px -5px rgba(40, 30, 25, 0.12), 0 8px 10px -6px rgba(40, 30, 25, 0.06);
  --shadow-2xl:     0 40px 50px -12px rgba(40, 30, 25, 0.18);

  /* Inner shadow for inset elements (pressed buttons, inputs) */
  --shadow-inner:   inset 0 2px 4px rgba(40, 30, 25, 0.06);

  /* Button shadows */
  --shadow-button:       0 2px 4px rgba(40, 30, 25, 0.12);
  --shadow-button-hover: 0 4px 8px rgba(40, 30, 25, 0.16);

/* --------------------------------------------------------------------------
   7. MISCELLANEOUS
   -------------------------------------------------------------------------- */

  /* Transitions */
  --transition-fast:     150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-base:     250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow:    400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Z-index scale */
  --z-base:      0;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-navbar:    300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
}

/* --------------------------------------------------------------------------
   2b. OKLCH OVERRIDES — Perceptually uniform color, shadows, and gradients
   Wrapped in @supports so iPadOS 16 Safari (no OKLCH support) falls back to hex.
   Safari 16.4+ and all modern browsers get the improved OKLCH precision.
   -------------------------------------------------------------------------- */
@supports (color: oklch(0 0 0)) {
  :root {
    /* --- Primary: Terracotta --- */
    --color-primary-50:   oklch(0.95 0.025 40);
    --color-primary-100:  oklch(0.90 0.040 40);
    --color-primary-200:  oklch(0.82 0.055 40);
    --color-primary-300:  oklch(0.72 0.065 40);
    --color-primary-400:  oklch(0.62 0.075 40);
    --color-primary-500:  oklch(0.52 0.080 40);   /* Base terracotta */
    --color-primary-600:  oklch(0.45 0.075 40);
    --color-primary-700:  oklch(0.38 0.065 40);
    --color-primary-800:  oklch(0.32 0.050 40);
    --color-primary-900:  oklch(0.26 0.040 40);

    /* --- Secondary: Deep warm brown --- */
    --color-secondary-50:   oklch(0.94 0.015 65);
    --color-secondary-100:  oklch(0.85 0.025 65);
    --color-secondary-200:  oklch(0.72 0.030 65);
    --color-secondary-300:  oklch(0.60 0.035 65);
    --color-secondary-400:  oklch(0.48 0.040 60);
    --color-secondary-500:  oklch(0.38 0.042 55);  /* Base warm brown */
    --color-secondary-600:  oklch(0.32 0.040 50);
    --color-secondary-700:  oklch(0.26 0.035 45);
    --color-secondary-800:  oklch(0.20 0.030 40);
    --color-secondary-900:  oklch(0.15 0.020 35);

    /* --- Accent: Burnished gold --- */
    --color-accent-50:   oklch(0.96 0.030 85);
    --color-accent-100:  oklch(0.90 0.045 85);
    --color-accent-200:  oklch(0.82 0.055 85);
    --color-accent-300:  oklch(0.75 0.065 85);
    --color-accent-400:  oklch(0.68 0.070 85);
    --color-accent-500:  oklch(0.70 0.065 85);    /* Base burnished gold */
    --color-accent-600:  oklch(0.60 0.060 85);
    --color-accent-700:  oklch(0.50 0.055 85);
    --color-accent-800:  oklch(0.40 0.045 85);
    --color-accent-900:  oklch(0.30 0.035 85);

    /* --- Warm neutrals --- */
    --color-neutral-50:   oklch(0.985 0.005 80);
    --color-neutral-100:  oklch(0.965 0.008 80);
    --color-neutral-150:  oklch(0.945 0.010 80);
    --color-neutral-200:  oklch(0.92 0.010 80);
    --color-neutral-300:  oklch(0.85 0.012 75);
    --color-neutral-400:  oklch(0.70 0.015 70);
    --color-neutral-500:  oklch(0.55 0.015 65);
    --color-neutral-600:  oklch(0.42 0.012 60);
    --color-neutral-700:  oklch(0.32 0.010 55);
    --color-neutral-800:  oklch(0.22 0.008 50);
    --color-neutral-900:  oklch(0.14 0.005 45);
    --color-neutral-950:  oklch(0.10 0.005 40);

    /* --- Semantic (surface, border, status) --- */
    --color-surface-raised:   oklch(0.99 0.003 80);
    --color-border-light:     oklch(0.95 0.005 80);

    --color-error:            oklch(0.50 0.14 25);
    --color-error-bg:         oklch(0.93 0.04 25);
    --color-success:          oklch(0.55 0.10 145);
    --color-success-bg:       oklch(0.93 0.04 145);
    --color-warning:          oklch(0.65 0.12 80);
    --color-warning-bg:       oklch(0.94 0.04 80);
    --color-info:             oklch(0.55 0.08 240);
    --color-info-bg:          oklch(0.92 0.03 240);

    /* Gradient — hero overlay, warm accent */
    --gradient-hero:          linear-gradient(180deg, oklch(0.10 0.005 40 / 0.60) 0%, oklch(0.10 0.005 40 / 0.30) 100%);
    --gradient-warm:          linear-gradient(135deg, oklch(0.85 0.06 40 / 0.15) 0%, oklch(0.85 0.04 80 / 0.10) 100%);

    /* Shadows — tinted toward terracotta/brown */
    --shadow-sm:      0 1px 2px oklch(0.20 0.02 40 / 0.06);
    --shadow-md:      0 4px 6px -1px oklch(0.20 0.02 40 / 0.08), 0 2px 4px -2px oklch(0.20 0.02 40 / 0.05);
    --shadow-lg:      0 10px 15px -3px oklch(0.20 0.02 40 / 0.10), 0 4px 6px -4px oklch(0.20 0.02 40 / 0.05);
    --shadow-xl:      0 20px 25px -5px oklch(0.20 0.02 40 / 0.12), 0 8px 10px -6px oklch(0.20 0.02 40 / 0.06);
    --shadow-2xl:     0 40px 50px -12px oklch(0.20 0.02 40 / 0.18);

    --shadow-inner:   inset 0 2px 4px oklch(0.20 0.02 40 / 0.06);
    --shadow-button:       0 2px 4px oklch(0.20 0.02 40 / 0.12);
    --shadow-button-hover: 0 4px 8px oklch(0.20 0.02 40 / 0.16);
  }
}

/* stylelint-enable declaration-block-no-duplicate-custom-properties */

/* --------------------------------------------------------------------------
   8. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE BREAKPOINT REFERENCE
   Use these in your media queries:
     ~ @media (min-width: 40em)  { ... }   (sm: 640px)
     ~ @media (min-width: 48em)  { ... }   (md: 768px)
     ~ @media (min-width: 64em)  { ... }   (lg: 1024px)
     ~ @media (min-width: 80em)  { ... }   (xl: 1280px)
   -------------------------------------------------------------------------- */