/**
 * L'Accordage — Design Tokens
 * New palette derived from logo colors:
 *   Logo green:  #BDBE3F (fresh sage-chartreuse)
 *   Logo brown:  #635120 (warm earthy dark brown)
 *
 * Design direction: botanical warmth, linen textures, pressed flowers,
 * airy and organic — minimalist cooperative aesthetic.
 *
 * Sections:
 *  1. Color palette (raw values)
 *  2. Semantic color aliases
 *  3. Typography
 *  4. Spacing scale
 *  5. Border radius
 *  6. Shadows
 *  7. Animation & motion
 *
 * @package laccordage
 */

:root {

  /* ── 1. Color Palette ───────────────────────────────────────────────────── */

  /* Logo brand values */
  --color-logo-green: #BDBE3F;   /* Fresh sage-chartreuse */
  --color-logo-brown: #635120;   /* Warm earthy dark brown */

  /* Sage scale — warm sage-beige canvas + logo green accent */
  --color-sage-900: #2a2f10;
  --color-sage-800: #3a4118;
  --color-sage-700: #4a5320;     /* Deep olive — CTA bg hover */
  --color-sage-600: #6b7030;
  --color-sage-500: #8a8e3a;
  --color-sage-400: #BDBE3F;     /* Logo green — active accent */
  --color-sage-300: #bec1a0;
  --color-sage-200: #d5d7bc;
  --color-sage-100: #e8e9d8;     /* Main background canvas */
  --color-sage-50:  #f2f3e8;

  /* Earth / Parchment — warm brown tones from logo brown */
  --color-earth-900: #2d2a1e;    /* Very dark warm brown — primary text */
  --color-earth-700: #635120;    /* Logo brown — logo color */
  --color-earth-500: #8a8060;
  --color-earth-300: #c8c2a8;
  --color-earth-200: #e0dbc8;
  --color-earth-100: #f0ede0;
  --color-earth-50:  #faf8f0;

  /* Keep parchment scale for backward compat with components */
  --color-parchment-900: #2d2a1e;
  --color-parchment-800: #635120;  /* Logo brown */
  --color-parchment-700: #7d6730;
  --color-parchment-600: #9a8048;
  --color-parchment-500: #8a8060;
  --color-parchment-400: #c8c2a8;
  --color-parchment-300: #d5d0bc;
  --color-parchment-200: #e0dbc8;
  --color-parchment-100: #f0ede0;
  --color-parchment-50:  #faf8f0;

  /* Warm Neutrals */
  --color-warm-950: #1a1710;
  --color-warm-900: #2d2a1e;
  --color-warm-800: #3d3826;
  --color-warm-700: #554f38;
  --color-warm-600: #5a5640;
  --color-warm-500: #8a8570;
  --color-warm-400: #8a8570;
  --color-warm-300: #c8c2a8;
  --color-warm-200: #d5d0bc;
  --color-warm-100: #eceadc;
  --color-warm-50:  #f5f4ec;
  --color-warm-25:  #fafaf5;

  /* Blush — soft pink-beige accent */
  --color-blush-600: #b06a58;
  --color-blush-500: #c27c6a;
  --color-blush-400: #d4957f;
  --color-blush-100: #f5e4de;
  --color-blush-50:  #faf2ef;

  /* ── 2. Semantic Color Aliases ──────────────────────────────────────────── */

  /* Backgrounds */
  --color-background:        var(--color-sage-100);     /* Warm sage-beige canvas #e8e9d8 */
  --color-surface:           #ffffff;
  --color-surface-alt:       #fafaf5;                   /* Near-white for cards on canvas */
  --color-surface-sage:      var(--color-sage-50);      /* Very light sage tint */

  /* Text */
  --color-text-primary:      var(--color-earth-900);    /* #2d2a1e — very dark warm brown */
  --color-text-secondary:    var(--color-warm-600);     /* #5a5640 — medium warm olive-brown */
  --color-text-muted:        var(--color-warm-500);     /* #8a8570 */
  --color-text-on-dark:      #ffffff;
  --color-text-on-green:     #ffffff;

  /* Borders */
  --color-border:            rgba(93, 87, 60, 0.15);
  --color-border-strong:     rgba(93, 87, 60, 0.30);
  --color-border-sage:       var(--color-sage-200);

  /* CTAs — deep confident olive-green */
  --color-cta-bg:            var(--color-sage-700);     /* #4a5320 */
  --color-cta-bg-hover:      var(--color-sage-800);     /* #3a4118 */
  --color-cta-text:          #ffffff;

  --color-cta-secondary-bg:       transparent;
  --color-cta-secondary-border:   var(--color-sage-700);
  --color-cta-secondary-text:     var(--color-sage-700);

  /* Sidebar — light, same sage-beige as background */
  --color-sidebar-bg:           var(--color-sage-100);  /* Same as canvas — #e8e9d8 */
  --color-sidebar-text:         var(--color-earth-900); /* Dark warm brown */
  --color-sidebar-muted:        var(--color-warm-600);
  --color-sidebar-active:       var(--color-sage-400);  /* Logo green #BDBE3F */
  --color-sidebar-hover:        var(--color-sage-100);  /* Kept for compat */
  --color-sidebar-hover-bg:     rgba(93, 87, 60, 0.08);
  --color-sidebar-border:       rgba(93, 87, 60, 0.20);

  /* Badge variants */
  --color-badge-sage-bg:     var(--color-sage-50);
  --color-badge-sage-text:   var(--color-sage-700);
  --color-badge-earth-bg:    var(--color-earth-100);
  --color-badge-earth-text:  var(--color-earth-700);
  --color-badge-blush-bg:    var(--color-blush-100);
  --color-badge-blush-text:  var(--color-blush-600);

  /* Section dark bg — use deep earth brown for footer contrast */
  --color-section-dark-bg:   var(--color-earth-900);
  --color-section-dark-text: var(--color-earth-100);

  /* Link colors */
  --color-link:              var(--color-sage-600);
  --color-link-hover:        var(--color-sage-700);

  /* ── 3. Typography ──────────────────────────────────────────────────────── */

  --font-display:  'Lora', Georgia, serif;
  --font-body:     'Outfit', system-ui, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-xs:   clamp(0.75rem,  0.72rem  + 0.2vw,  0.875rem);
  --text-sm:   clamp(0.875rem, 0.85rem  + 0.2vw,  1rem);
  --text-base: clamp(1rem,     0.96rem  + 0.4vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 1.05rem  + 0.6vw,  1.375rem);
  --text-xl:   clamp(1.25rem,  1.1rem   + 0.9vw,  1.75rem);
  --text-2xl:  clamp(1.5rem,   1.25rem  + 1.2vw,  2.25rem);
  --text-3xl:  clamp(1.875rem, 1.5rem   + 1.8vw,  3rem);
  --text-4xl:  clamp(2.25rem,  1.75rem  + 2.2vw,  3.75rem);
  --text-5xl:  clamp(2.75rem,  2rem     + 2.8vw,  4.5rem);

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tight:   -0.025em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.14em;

  /* ── 4. Spacing Scale ───────────────────────────────────────────────────── */

  --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 */
  --space-32:   8rem;       /* 128px */

  /* Section-level */
  --section-py: clamp(3rem, 7vw, 6rem);
  --section-px: clamp(1rem, 5vw, 3rem);

  /* Container widths */
  --container-max:   1280px;
  --container-prose: 720px;

  /* Sidebar */
  --sidebar-width: 300px;

  /* ── 8. Layout Spacing System ───────────────────────────────────────────── */

  --layout-section-gap:  var(--space-16);       /* between major sections */
  --layout-element-gap:  var(--space-8);         /* between elements within a section */
  --layout-content-gap:  var(--space-6);         /* between content blocks */
  --layout-item-gap:     var(--space-4);         /* between list items / small elements */
  --layout-page-px:      clamp(1.5rem, 4vw, 3rem); /* horizontal page padding */
  --layout-page-py:      clamp(2rem, 5vw, 4rem);   /* vertical page padding */

  /* ── 5. Border Radius ───────────────────────────────────────────────────── */

  --radius-xs:   0.125rem;   /*  2px — tiny badges */
  --radius-sm:   0.25rem;    /*  4px — small elements */
  --radius-md:   0.5rem;     /*  8px — buttons, inputs */
  --radius-lg:   0.875rem;   /* 14px — cards */
  --radius-xl:   1.25rem;    /* 20px — hero images */
  --radius-2xl:  2rem;       /* 32px — large containers */
  --radius-full: 9999px;     /* pills */

  /* ── 6. Shadows ─────────────────────────────────────────────────────────── */

  /* Warm-tinted shadows (use parchment/brown base color) */
  --shadow-sm:  0 1px 3px rgba(63, 51, 18, 0.07), 0 1px 2px rgba(63, 51, 18, 0.05);
  --shadow-md:  0 3px 8px rgba(63, 51, 18, 0.08), 0 2px 4px rgba(63, 51, 18, 0.06);
  --shadow-lg:  0 8px 20px rgba(63, 51, 18, 0.09), 0 4px 8px rgba(63, 51, 18, 0.07);
  --shadow-xl:  0 16px 36px rgba(63, 51, 18, 0.11), 0 6px 12px rgba(63, 51, 18, 0.08);
  --shadow-inner: inset 0 2px 4px rgba(63, 51, 18, 0.07);

  /* Accent shadows for hover states */
  --shadow-sage:  0 6px 20px rgba(154, 158, 53, 0.22);
  --shadow-earth: 0 6px 20px rgba(99, 81, 32, 0.18);

  /* ── 7. Animation & Motion ──────────────────────────────────────────────── */

  --duration-fast:    140ms;
  --duration-normal:  240ms;
  --duration-slow:    380ms;
  --duration-slower:  560ms;

  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);
  --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}