/**
 * Design Tokens — Single Source of Truth
 *
 * Every visual decision in Recipes Lola originates here. No hardcoded
 * color, spacing, radius, shadow, duration, or typography value may
 * exist anywhere outside this file.
 *
 * Brand foundation: Royal Purple / Pure Canvas / Ink Charcoal / Slate
 * Neutral / Soft Tint. See docs/Brand-Identity.md for full rationale.
 *
 * @package    Recipes_Lola
 * @version    1.0.0
 */

:root {

  /* BRAND PRIMITIVES */
  --rl-brand-purple:   #A100E1;
  --rl-brand-canvas:   #FCFCFD;
  --rl-brand-charcoal: #161616;
  --rl-brand-slate:    #6B7280;
  --rl-brand-tint:     #E9D5FF;

  /* COLOR — PRIMARY SCALE */
  --rl-color-primary-50:   #F5E6FD;
  --rl-color-primary-100:  #E9D5FF;
  --rl-color-primary-200:  #D4ABFF;
  --rl-color-primary-300:  #BE80FF;
  --rl-color-primary-400:  #A855F7;
  --rl-color-primary-500:  #A100E1;
  --rl-color-primary-600:  #8400B8;
  --rl-color-primary-700:  #660090;
  --rl-color-primary-800:  #4A0068;
  --rl-color-primary-900:  #2D0040;

  --rl-color-primary:        var(--rl-brand-purple);
  --rl-color-primary-hover:  var(--rl-color-primary-600);
  --rl-color-primary-active: var(--rl-color-primary-700);
  --rl-color-primary-subtle: var(--rl-brand-tint);
  --rl-color-primary-fg:     #FFFFFF;
  --rl-color-primary-border: var(--rl-color-primary-200);
  --rl-color-primary-muted:  var(--rl-color-primary-400);

  /* COLOR — NEUTRAL SCALE */
  --rl-color-neutral-50:   var(--rl-brand-canvas);
  --rl-color-neutral-100:  #F4F4F6;
  --rl-color-neutral-200:  #E9E9EC;
  --rl-color-neutral-300:  #D4D4D9;
  --rl-color-neutral-400:  #9CA3AF;
  --rl-color-neutral-500:  var(--rl-brand-slate);
  --rl-color-neutral-600:  #4B5563;
  --rl-color-neutral-700:  #374151;
  --rl-color-neutral-800:  #1F2937;
  --rl-color-neutral-900:  #111827;
  --rl-color-neutral-950:  var(--rl-brand-charcoal);

  /* COLOR — SEMANTIC SURFACES */
  --rl-color-background:       var(--rl-brand-canvas);
  --rl-color-background-alt:   var(--rl-color-neutral-100);
  --rl-color-surface:          #FFFFFF;
  --rl-color-surface-raised:   var(--rl-color-neutral-100);
  --rl-color-surface-overlay:  rgba(252, 252, 253, 0.92);
  --rl-color-surface-sunken:   var(--rl-color-neutral-200);
  --rl-color-surface-disabled: var(--rl-color-neutral-100);

  /* COLOR — FOREGROUND */
  --rl-color-foreground:             var(--rl-brand-charcoal);
  --rl-color-foreground-muted:       var(--rl-brand-slate);
  --rl-color-foreground-subtle:      var(--rl-color-neutral-400);
  --rl-color-foreground-placeholder: var(--rl-color-neutral-300);
  --rl-color-foreground-disabled:    var(--rl-color-neutral-300);
  --rl-color-foreground-inverse:     #FFFFFF;
  --rl-color-foreground-on-primary:  #FFFFFF;

  /* COLOR — BORDERS */
  --rl-color-border:          var(--rl-color-neutral-200);
  --rl-color-border-strong:   var(--rl-color-neutral-300);
  --rl-color-border-focus:    var(--rl-brand-purple);
  --rl-color-border-input:    var(--rl-color-neutral-300);
  --rl-color-border-disabled: var(--rl-color-neutral-200);

  /* COLOR — FEEDBACK */
  --rl-color-success:        #0D9B6E;
  --rl-color-success-hover:  #0A7D59;
  --rl-color-success-subtle: #ECFAF5;
  --rl-color-success-border: #A7F0D8;
  --rl-color-success-fg:     #FFFFFF;

  --rl-color-warning:        #B45309;
  --rl-color-warning-hover:  #92400E;
  --rl-color-warning-subtle: #FFFBEB;
  --rl-color-warning-border: #FDE68A;
  --rl-color-warning-fg:     #FFFFFF;

  --rl-color-danger:         #C0392B;
  --rl-color-danger-hover:   #A93226;
  --rl-color-danger-subtle:  #FEF2F2;
  --rl-color-danger-border:  #FECACA;
  --rl-color-danger-fg:      #FFFFFF;

  --rl-color-info:           #0369A1;
  --rl-color-info-hover:     #025685;
  --rl-color-info-subtle:    #F0F9FF;
  --rl-color-info-border:    #BAE6FD;
  --rl-color-info-fg:        #FFFFFF;

  /* COLOR — INTERACTIVE STATES */
  --rl-color-focus-ring:     rgba(161, 0, 225, 0.35);
  --rl-color-overlay:        rgba(22, 22, 22, 0.55);
  --rl-color-selection-bg:   var(--rl-brand-tint);
  --rl-color-selection-fg:   var(--rl-brand-charcoal);
  --rl-color-skeleton-base:  var(--rl-color-neutral-200);
  --rl-color-skeleton-shine: var(--rl-color-neutral-100);
  --rl-color-transparent:    transparent;

  /* COLOR — ADVERTISEMENT SYSTEM */
  --rl-ad-background:              var(--rl-color-neutral-100);
  --rl-ad-background-hover:        var(--rl-color-neutral-200);
  --rl-ad-border:                  var(--rl-color-border);
  --rl-ad-border-strong:           var(--rl-color-border-strong);
  --rl-ad-placeholder-bg:          var(--rl-color-neutral-200);
  --rl-ad-placeholder-fg:          var(--rl-color-neutral-400);
  --rl-ad-label-bg:                var(--rl-color-neutral-200);
  --rl-ad-label-color:             var(--rl-color-neutral-500);
  --rl-ad-safe-height-leaderboard: 90px;
  --rl-ad-safe-height-banner:      50px;
  --rl-ad-safe-height-rectangle:   250px;
  --rl-ad-safe-height-sidebar:     600px;
  --rl-ad-safe-height-mobile:      50px;
  --rl-ad-container-max-width:     728px;
  --rl-ad-sidebar-max-width:       300px;
  --rl-ad-skeleton-speed:          1.8s;
  --rl-ad-radius:                  var(--rl-radius-md);
  --rl-ad-spacing:                 var(--rl-space-4);
  --rl-ad-label-font-size:         var(--rl-text-2xs);
  --rl-ad-label-letter-spacing:    var(--rl-tracking-widest);

  /* COLOR — RECIPE DIFFICULTY */
  --rl-difficulty-easy-color:    var(--rl-color-success);
  --rl-difficulty-easy-bg:       var(--rl-color-success-subtle);
  --rl-difficulty-easy-border:   var(--rl-color-success-border);
  --rl-difficulty-medium-color:  var(--rl-color-warning);
  --rl-difficulty-medium-bg:     var(--rl-color-warning-subtle);
  --rl-difficulty-medium-border: var(--rl-color-warning-border);
  --rl-difficulty-hard-color:    var(--rl-color-danger);
  --rl-difficulty-hard-bg:       var(--rl-color-danger-subtle);
  --rl-difficulty-hard-border:   var(--rl-color-danger-border);

  /* TYPOGRAPHY — FONT FAMILIES */
  --rl-font-display: 'DM Serif Display', 'Garamond', Georgia, serif;
  --rl-font-serif:   var(--rl-font-display);
  --rl-font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --rl-font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;

  /* TYPOGRAPHY — FLUID TYPE SCALE (Perfect Fourth ×1.333) */
  --rl-text-2xs:  clamp(0.625rem,  0.55vw + 0.45rem, 0.694rem);
  --rl-text-xs:   clamp(0.75rem,   0.65vw + 0.55rem, 0.813rem);
  --rl-text-sm:   clamp(0.875rem,  0.75vw + 0.65rem, 0.938rem);
  --rl-text-base: clamp(1rem,      1.00vw + 0.75rem, 1.063rem);
  --rl-text-md:   clamp(1.125rem,  1.10vw + 0.85rem, 1.25rem);
  --rl-text-lg:   clamp(1.25rem,   1.30vw + 0.95rem, 1.5rem);
  --rl-text-xl:   clamp(1.5rem,    1.80vw + 1.10rem, 2rem);
  --rl-text-2xl:  clamp(2rem,      2.50vw + 1.30rem, 2.667rem);
  --rl-text-3xl:  clamp(2.5rem,    3.00vw + 1.60rem, 3.556rem);
  --rl-text-4xl:  clamp(3rem,      4.00vw + 1.80rem, 4.5rem);
  --rl-text-5xl:  clamp(3.5rem,    5.00vw + 2.00rem, 6rem);
  --rl-text-6xl:  clamp(4rem,      6.50vw + 2.00rem, 8rem);

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

  --rl-leading-none:    1;
  --rl-leading-tighter: 1.1;
  --rl-leading-tight:   1.2;
  --rl-leading-snug:    1.35;
  --rl-leading-normal:  1.5;
  --rl-leading-relaxed: 1.65;
  --rl-leading-loose:   1.8;

  --rl-tracking-tighter: -0.04em;
  --rl-tracking-tight:   -0.02em;
  --rl-tracking-normal:   0em;
  --rl-tracking-wide:     0.02em;
  --rl-tracking-wider:    0.06em;
  --rl-tracking-widest:   0.12em;

  --rl-prose-xs:   42ch;
  --rl-prose-sm:   55ch;
  --rl-prose-md:   66ch;
  --rl-prose-lg:   78ch;
  --rl-prose-xl:   90ch;
  --rl-prose-none: none;

  --rl-paragraph-spacing:       var(--rl-space-5);
  --rl-paragraph-spacing-tight: var(--rl-space-3);
  --rl-paragraph-spacing-loose: var(--rl-space-8);

  --rl-text-code-scale:    0.875em;
  --rl-text-sub-sup-scale: 0.75em;
  --rl-sup-offset: -0.5em;
  --rl-sub-offset:  0.25em;

  /* BROWSER CONSTANTS — not visual design decisions, tokenized for consistency */
  --rl-tab-size: 4;
  --rl-color-scheme-default: light;

  /* SPACING — 8px base grid */
  --rl-space-px:   1px;
  --rl-space-0:    0rem;
  --rl-space-0-5:  0.125rem;
  --rl-space-1:    0.25rem;
  --rl-space-1-5:  0.375rem;
  --rl-space-2:    0.5rem;
  --rl-space-2-5:  0.625rem;
  --rl-space-3:    0.75rem;
  --rl-space-3-5:  0.875rem;
  --rl-space-4:    1rem;
  --rl-space-5:    1.25rem;
  --rl-space-6:    1.5rem;
  --rl-space-7:    1.75rem;
  --rl-space-8:    2rem;
  --rl-space-9:    2.25rem;
  --rl-space-10:   2.5rem;
  --rl-space-12:   3rem;
  --rl-space-14:   3.5rem;
  --rl-space-16:   4rem;
  --rl-space-20:   5rem;
  --rl-space-24:   6rem;
  --rl-space-28:   7rem;
  --rl-space-32:   8rem;
  --rl-space-36:   9rem;
  --rl-space-40:  10rem;
  --rl-space-48:  12rem;
  --rl-space-56:  14rem;
  --rl-space-64:  16rem;
  --rl-space-80:  20rem;
  --rl-space-96:  24rem;

  --rl-section-spacing-xs: clamp(var(--rl-space-8),  4vw,  var(--rl-space-12));
  --rl-section-spacing-sm: clamp(var(--rl-space-12), 5vw,  var(--rl-space-20));
  --rl-section-spacing-md: clamp(var(--rl-space-16), 6vw,  var(--rl-space-28));
  --rl-section-spacing-lg: clamp(var(--rl-space-20), 8vw,  var(--rl-space-36));
  --rl-section-spacing-xl: clamp(var(--rl-space-28), 10vw, var(--rl-space-48));

  --rl-container-xs:        480px;
  --rl-container-sm:        640px;
  --rl-container-md:        768px;
  --rl-container-lg:        1024px;
  --rl-container-xl:        1280px;
  --rl-container-2xl:       1536px;
  --rl-container-padding-x: clamp(var(--rl-space-5), 5vw, var(--rl-space-12));

  --rl-grid-cols:  12;
  --rl-grid-gap-x: var(--rl-space-6);
  --rl-grid-gap-y: var(--rl-space-8);

  --rl-sidebar-width:    320px;
  --rl-sidebar-width-sm: 280px;
  --rl-content-max-width: var(--rl-container-lg);

  /* BORDER RADIUS — composed, precise, resists over-rounding */
  --rl-radius-none: 0;
  --rl-radius-xs:   2px;
  --rl-radius-sm:   4px;
  --rl-radius-md:   6px;
  --rl-radius-lg:   8px;
  --rl-radius-xl:   12px;
  --rl-radius-2xl:  16px;
  --rl-radius-full: 9999px;

  --rl-border-width:   1px;
  --rl-border-width-2: 2px;
  --rl-border-width-4: 4px;

  /* ELEVATION — SHADOWS */
  --rl-shadow-none:    none;
  --rl-shadow-xs:      0 1px 2px rgba(22, 22, 22, 0.04);
  --rl-shadow-sm:      0 1px 3px rgba(22, 22, 22, 0.06), 0 1px 2px rgba(22, 22, 22, 0.04);
  --rl-shadow-md:      0 4px 8px rgba(22, 22, 22, 0.06), 0 2px 4px rgba(22, 22, 22, 0.04);
  --rl-shadow-lg:      0 12px 24px rgba(22, 22, 22, 0.07), 0 4px 8px rgba(22, 22, 22, 0.04);
  --rl-shadow-xl:      0 24px 48px rgba(22, 22, 22, 0.09), 0 12px 16px rgba(22, 22, 22, 0.04);
  --rl-shadow-2xl:     0 32px 64px rgba(22, 22, 22, 0.12);
  --rl-shadow-inner:   inset 0 2px 4px rgba(22, 22, 22, 0.05);
  --rl-shadow-focus:   0 0 0 3px var(--rl-color-focus-ring);
  --rl-shadow-overlay: 0 32px 64px rgba(22, 22, 22, 0.22);

  /* FOCUS SYSTEM — dedicated tokens, single source of truth */
  --rl-focus-outline-width:  var(--rl-border-width-2);
  --rl-focus-outline-color:  var(--rl-color-border-focus);
  --rl-focus-outline-offset: var(--rl-space-1);
  --rl-focus-ring-shadow:    var(--rl-shadow-focus);
  --rl-focus-border-radius:  var(--rl-radius-sm);

  /* SCROLLBAR */
  --rl-scrollbar-width:       6px;
  --rl-scrollbar-thumb-color: var(--rl-color-border-strong);
  --rl-scrollbar-thumb-hover: var(--rl-color-foreground-subtle);

  /* SKIP NAVIGATION */
  --rl-skip-nav-bg:             var(--rl-color-primary);
  --rl-skip-nav-color:          var(--rl-color-primary-fg);
  --rl-skip-nav-padding-x:      var(--rl-space-6);
  --rl-skip-nav-padding-y:      var(--rl-space-3);
  --rl-skip-nav-font-size:      var(--rl-text-sm);
  --rl-skip-nav-font-weight:    var(--rl-weight-medium);
  --rl-skip-nav-letter-spacing: var(--rl-tracking-wide);
  --rl-skip-nav-radius:         var(--rl-radius-md);
  --rl-skip-nav-offset-block:   var(--rl-space-4);
  --rl-skip-nav-offset-inline:  var(--rl-space-4);
  --rl-skip-nav-hide-offset:    var(--rl-space-8);

  --rl-selection-bg: var(--rl-color-selection-bg);
  --rl-selection-fg: var(--rl-color-selection-fg);

  --rl-code-bg:     var(--rl-color-primary-subtle);
  --rl-code-color:  var(--rl-color-primary);
  --rl-code-radius: var(--rl-radius-xs);
  --rl-code-px:     0.35em;
  --rl-code-py:     0.1em;
  --rl-pre-bg:      var(--rl-color-surface-raised);
  --rl-pre-border:  var(--rl-color-border);
  --rl-pre-radius:  var(--rl-radius-lg);
  --rl-pre-padding: var(--rl-space-5);
  --rl-mark-bg:     var(--rl-color-primary-subtle);
  --rl-mark-color:  var(--rl-color-foreground);
  --rl-mark-px:     var(--rl-space-0-5);

  /* MOTION */
  --rl-duration-instant: 0ms;
  --rl-duration-fast:    120ms;
  --rl-duration-normal:  200ms;
  --rl-duration-slow:    320ms;
  --rl-duration-slower:  480ms;

  --rl-ease-linear:  linear;
  --rl-ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --rl-ease-in:      cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --rl-ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --rl-ease-default: cubic-bezier(0.4, 0.0, 0.2, 1.0);

  --rl-transition-fast:    var(--rl-duration-fast)   var(--rl-ease-out);
  --rl-transition-default: var(--rl-duration-normal) var(--rl-ease-in-out);
  --rl-transition-slow:    var(--rl-duration-slow)   var(--rl-ease-in-out);

  --rl-opacity-0:        0;
  --rl-opacity-10:       0.1;
  --rl-opacity-20:       0.2;
  --rl-opacity-50:       0.5;
  --rl-opacity-75:       0.75;
  --rl-opacity-100:      1;
  --rl-opacity-disabled: 0.4;

  /* Z-INDEX */
  --rl-z-below:    -1;
  --rl-z-base:      0;
  --rl-z-raised:    10;
  --rl-z-card:      20;
  --rl-z-dropdown:  100;
  --rl-z-sticky:    200;
  --rl-z-header:    250;
  --rl-z-overlay:   300;
  --rl-z-modal:     400;
  --rl-z-toast:     500;
  --rl-z-tooltip:   600;

  /* COMPONENT TOKENS — HEADER */
  --rl-header-height:      64px;
  --rl-header-height-sm:   56px;
  --rl-header-bg:          var(--rl-color-background);
  --rl-header-border:      var(--rl-color-border);
  --rl-header-shadow:      none;
  --rl-header-link-color:  var(--rl-color-foreground-muted);
  --rl-header-link-hover:  var(--rl-color-foreground);
  --rl-header-link-active: var(--rl-color-primary);

  /* COMPONENT TOKENS — CARD */
  --rl-card-bg:           var(--rl-color-surface);
  --rl-card-border:       var(--rl-color-border);
  --rl-card-shadow:       none;
  --rl-card-shadow-hover: var(--rl-shadow-md);
  --rl-card-radius:       var(--rl-radius-lg);
  --rl-card-padding:      var(--rl-space-6);
  --rl-card-gap:          var(--rl-space-3);
  --rl-card-img-ratio:    4 / 3;
  --rl-card-transition:   var(--rl-transition-default);

  /* COMPONENT TOKENS — BUTTON */
  --rl-btn-padding-x:      var(--rl-space-5);
  --rl-btn-padding-y:      var(--rl-space-2-5);
  --rl-btn-padding-x-sm:   var(--rl-space-4);
  --rl-btn-padding-y-sm:   var(--rl-space-1-5);
  --rl-btn-padding-x-lg:   var(--rl-space-7);
  --rl-btn-padding-y-lg:   var(--rl-space-3-5);
  --rl-btn-radius:         var(--rl-radius-md);
  --rl-btn-font-weight:    var(--rl-weight-medium);
  --rl-btn-font-size:      var(--rl-text-sm);
  --rl-btn-letter-spacing: var(--rl-tracking-wide);
  --rl-btn-transition:     var(--rl-transition-fast);
  --rl-btn-primary-bg:     var(--rl-color-primary);
  --rl-btn-primary-hover:  var(--rl-color-primary-hover);
  --rl-btn-primary-fg:     var(--rl-color-primary-fg);

  /* COMPONENT TOKENS — FORM INPUT */
  --rl-input-height:       44px;
  --rl-input-height-sm:    36px;
  --rl-input-height-lg:    52px;
  --rl-input-padding-x:    var(--rl-space-4);
  --rl-input-radius:       var(--rl-radius-md);
  --rl-input-border:       var(--rl-color-border-input);
  --rl-input-border-focus: var(--rl-color-border-focus);
  --rl-input-bg:           var(--rl-color-surface);
  --rl-input-font-size:    var(--rl-text-base);
  --rl-input-transition:   var(--rl-transition-fast);

  /* COMPONENT TOKENS — BADGE */
  --rl-badge-padding-x:      var(--rl-space-2-5);
  --rl-badge-padding-y:      var(--rl-space-0-5);
  --rl-badge-radius:         var(--rl-radius-sm);
  --rl-badge-font-size:      var(--rl-text-xs);
  --rl-badge-font-weight:    var(--rl-weight-medium);
  --rl-badge-letter-spacing: var(--rl-tracking-wide);

  /* ICON SYSTEM */
  --rl-icon-size-sm: 16px;
  --rl-icon-size-md: 20px;
  --rl-icon-size-lg: 24px;
  --rl-icon-size-xl: 32px;
  --rl-icon-stroke:  1.5;

}