/* ============================================================
   SCRAPPYDOG DESIGN TOKENS
   Single source of truth for all design values.
   Palette: Deep charcoal base · Warm off-white · Amber-orange accent
   ============================================================ */

:root {
  /* ── Color Palette ─────────────────────────────────────────── */

  /* Neutrals — warm charcoal to cream */
  --color-ink-900:  #0F0E0D;   /* Near-black, richly warm */
  --color-ink-800:  #1C1B18;   /* Primary dark background */
  --color-ink-700:  #2A2924;   /* Card / panel backgrounds */
  --color-ink-600:  #3D3B35;   /* Borders, dividers */
  --color-ink-400:  #7A7568;   /* Muted / secondary text on dark */
  --color-ink-200:  #C4BFB4;   /* Subdued text on dark */
  --color-ink-100:  #E8E4DC;   /* Light surface, alt bg */
  --color-ink-50:   #F5F2ED;   /* Off-white page background */
  --color-white:    #FDFCFA;   /* Pure-ish white */

  /* Accent — amber-orange (the "scrappy" energy) */
  --color-accent:       #FF6B35;   /* Primary CTA, highlights */
  --color-accent-light: #FF8F65;   /* Hover states */
  --color-accent-dark:  #D94E1F;   /* Active / pressed */
  --color-accent-muted: rgba(255, 107, 53, 0.12);  /* Tint backgrounds */
  --color-accent-glow:  rgba(255, 107, 53, 0.30);  /* Glow effects */

  /* Secondary — golden amber */
  --color-gold:       #F5A623;
  --color-gold-light: #F7C262;
  --color-gold-muted: rgba(245, 166, 35, 0.15);

  /* Semantic */
  --color-success: #3ECF8E;
  --color-warning: #F5A623;
  --color-error:   #E5534B;
  --color-info:    #4C8EDA;

  /* ── Legacy color aliases (used by layout.css) ─────────────── */
  --color-primary:        var(--color-ink-800);
  --color-primary-light:  var(--color-ink-600);
  --color-primary-dark:   var(--color-ink-900);
  --color-brand:          var(--color-ink-800);
  --color-off-white:      var(--color-ink-50);
  --color-surface:        var(--color-ink-100);
  --color-surface-dark:   var(--color-ink-200);
  --color-text-primary:   var(--color-ink-900);
  --color-text-secondary: var(--color-ink-700);
  --color-text-muted:     var(--color-ink-400);
  --color-text-on-dark:   var(--color-ink-50);
  --color-text-on-accent: var(--color-white);
  --color-border:         var(--color-ink-200);
  --color-border-dark:    var(--color-ink-400);

  /* ── Semantic / role mappings ───────────────────────────────── */

  /* Page */
  --bg-page:      var(--color-ink-800);
  --bg-surface:   var(--color-ink-700);
  --bg-elevated:  #312F28;
  --bg-overlay:   rgba(15, 14, 13, 0.80);

  /* Text on dark background — explicit contrast */
  --text-primary:    var(--color-white);        /* #FDFCFA on #1C1B18 → ~14:1 */
  --text-secondary:  var(--color-ink-200);      /* #C4BFB4 on #1C1B18 → ~7.2:1 */
  --text-muted:      var(--color-ink-400);      /* #7A7568 on #1C1B18 → ~4.5:1 */
  --text-accent:     var(--color-accent);       /* #FF6B35 on #1C1B18 → ~5.8:1 */
  --text-inverse:    var(--color-ink-900);      /* For light surfaces */

  /* Borders */
  --border-subtle:   rgba(255, 255, 255, 0.07);
  --border-default:  rgba(255, 255, 255, 0.12);
  --border-strong:   rgba(255, 255, 255, 0.22);
  --border-accent:   var(--color-accent);

  /* Interactive */
  --focus-ring: 0 0 0 3px rgba(255, 107, 53, 0.45);

  /* ── Typography ────────────────────────────────────────────── */

  --font-display: 'Syne', 'Georgia', serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --font-ui:      'DM Sans', 'Helvetica Neue', sans-serif;

  /* Size scale — primary naming (used by main.css) */
  --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 */

  /* Size scale — aliases (used by layout.css) */
  --font-size-xs:   var(--text-xs);
  --font-size-sm:   var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-md:   var(--text-lg);
  --font-size-lg:   var(--text-xl);
  --font-size-xl:   var(--text-2xl);
  --font-size-2xl:  var(--text-3xl);
  --font-size-3xl:  var(--text-4xl);
  --font-size-4xl:  var(--text-5xl);
  --font-size-5xl:  var(--text-7xl);

  /* Weight — primary naming (used by main.css) */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Weight — aliases (used by layout.css) */
  --font-weight-regular:  var(--weight-regular);
  --font-weight-medium:   var(--weight-medium);
  --font-weight-semibold: var(--weight-semibold);
  --font-weight-bold:     var(--weight-bold);
  --font-weight-extrabold: 800;
  --font-weight-black:    var(--weight-black);

  /* Line height — primary naming (used by main.css) */
  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Line height — aliases (used by layout.css) */
  --line-height-tight:  var(--leading-tight);
  --line-height-snug:   var(--leading-snug);
  --line-height-normal: var(--leading-normal);
  --line-height-loose:  var(--leading-loose);

  /* Letter spacing — primary naming (used by main.css) */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;

  /* Letter spacing — aliases (used by layout.css) */
  --letter-spacing-tight:  var(--tracking-tight);
  --letter-spacing-snug:  -0.01em;
  --letter-spacing-normal: var(--tracking-normal);
  --letter-spacing-wide:   var(--tracking-wide);
  --letter-spacing-wider:  var(--tracking-wider);

  /* ── Spacing ───────────────────────────────────────────────── */
  --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 */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */

  /* ── Layout ────────────────────────────────────────────────── */
  --max-width-sm:     640px;
  --max-width-md:     768px;
  --max-width-lg:     1024px;
  --max-width-xl:     1280px;
  --max-width-2xl:    1440px;
  --container-padding: var(--space-6);
  --grid-gutter: clamp(var(--space-4), 4vw, var(--space-8));
  --section-padding-y: clamp(3rem, 5.5vw, 6rem);

  /* ── Border radius ─────────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:   0 10px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:   0 20px 48px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.08);
  --shadow-glow: 0 0 40px var(--color-accent-glow);
  --shadow-accent: 0 8px 24px var(--color-accent-glow);

  /* ── Motion ────────────────────────────────────────────────── */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-glacial: 900ms;

  /* Aliases for layout.css */
  --duration-base: var(--duration-normal);

  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Aliases for layout.css */
  --ease-out: var(--ease-out-quart);

  /* Legacy transition shorthands */
  --transition-fast:   var(--duration-fast) var(--ease-out-quart);
  --transition-base:   var(--duration-normal) var(--ease-out-quart);
  --transition-slow:   var(--duration-slow) var(--ease-out-quart);
  --transition-spring: var(--duration-normal) var(--ease-spring);

  /* ── Z-index layers ────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── Light section overrides ───────────────────────────────────── */
.section--light {
  --bg-page:       var(--color-ink-50);
  --bg-surface:    var(--color-white);
  --text-primary:  var(--color-ink-900);
  --text-secondary: var(--color-ink-700);
  --text-muted:    var(--color-ink-600);
  --border-subtle: rgba(0, 0, 0, 0.09);
  --border-default: rgba(0, 0, 0, 0.14);

  background-color: var(--color-ink-50);
  color: var(--color-ink-900);
}