/* ============================================================
   SKYLINE BY SILVIA — DESIGN TOKENS
   Light + dark themes. Port these to your Tailwind theme config.
   ============================================================ */

:root {
  /* ---- Brand: Teal-green (from the Silvia leaf logo) ---- */
  --teal-50:  #eafaf3;
  --teal-100: #d2f4e6;
  --teal-200: #a7e9d2;
  --teal-300: #6fd6bf;
  --teal-400: #34bda4;
  --teal-500: #14a88e;
  --teal-600: #0c8870; /* legacy teal ramp — retired as the brand accent (now blue) */
  --teal-700: #096b5b;
  --teal-800: #0a5749;
  --teal-900: #0a473d;
  --teal-950: #06302b;
  /* blue gradient for graphic moments (brand primary family) */
  --grad-accent: linear-gradient(135deg, #6cb8ff 0%, #2f9bf0 54%, #1f7fd0 100%);

  /* ---- Neutral: Slate (cool, trustworthy) ---- */
  /* ---- Neutral: Soft warm gray (smooth, warm, low-saturation) ---- */
  --slate-0:   #ffffff;
  --slate-25:  #fbfbf9;
  --slate-50:  #f6f6f3;
  --slate-100: #eeede9;
  --slate-150: #e7e6e1;
  --slate-200: #dbd9d3;
  --slate-300: #c2bfb7;
  --slate-400: #918d83;
  --slate-500: #6a665d;
  --slate-600: #514e47;
  --slate-700: #3b3833;
  --slate-800: #292723;
  --slate-900: #1c1a16;
  --slate-950: #110f0c;

  /* ---- Confidence tiers ---- */
  --tier-auto:    #1f9d6b;  /* emerald — auto-post / approved */
  --tier-auto-bg: #e6f6ec;
  --tier-auto-fg: #0a6b48;
  --tier-bulk:    #d98014;  /* warm amber — bulk-approve */
  --tier-bulk-bg: #fcefda;
  --tier-bulk-fg: #97560a;
  --tier-review:    #d8484f; /* warm red — individual review (you step in) */
  --tier-review-bg: #fdeaea;
  --tier-review-fg: #b22d36;

  /* ---- Semantic (light theme defaults) ---- */
  --bg:            #fdfdfb;
  --bg-subtle:     #f6f5f1;
  --bg-sunken:     #eeede8;
  --surface:       #ffffff;
  --surface-2:     var(--slate-25);
  --border:        #e7e5de;
  --border-strong: #d6d3ca;
  --text:          var(--slate-900);
  --text-secondary:var(--slate-600);
  --text-muted:    var(--slate-400);
  --text-on-accent:#ffffff;
  --accent:        #1f7fd0; /* Silvia signature blue (brand primary) */
  --accent-hover:  #186bb0;
  --accent-soft:   #e8f2fc;
  --accent-border: #bfdcf5;
  --focus-ring:    #2f9bf0;

  /* ---- Typography ---- */
  --font-head: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale (clamped) */
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
  --fs-xl:   clamp(1.35rem, 0.8vw + 1.1rem, 1.6rem);
  --fs-2xl:  clamp(1.7rem, 1.6vw + 1.2rem, 2.25rem);
  --fs-3xl:  clamp(2.1rem, 2.6vw + 1.2rem, 3rem);
  --fs-4xl:  clamp(2.6rem, 4vw + 1.1rem, 4.25rem);
  --fs-5xl:  clamp(3rem, 5.5vw + 1rem, 5.25rem);

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-base:  1.6;
  --tracking-tight: -0.018em;
  --tracking-snug:  -0.008em;
  --tracking-wide:  0.05em;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  /* ---- Radius (soft, rounded) ---- */
  --r-sm:  8px;
  --r-md:  13px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full: 999px;

  /* ---- Shadows (soft, layered) ---- */
  --sh-xs: 0 1px 2px rgba(40, 38, 32, 0.05);
  --sh-sm: 0 2px 6px -1px rgba(40, 38, 32, 0.07), 0 1px 3px rgba(40, 38, 32, 0.04);
  --sh-md: 0 8px 22px -6px rgba(40, 38, 32, 0.09), 0 3px 9px -4px rgba(40, 38, 32, 0.05);
  --sh-lg: 0 22px 48px -14px rgba(40, 38, 32, 0.14), 0 10px 22px -10px rgba(40, 38, 32, 0.08);
  --sh-xl: 0 40px 80px -22px rgba(40, 38, 32, 0.20), 0 18px 38px -16px rgba(40, 38, 32, 0.10);
  --sh-accent: 0 14px 34px -10px rgba(31, 127, 208, 0.42);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 920px;
  --nav-h: 68px;

  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --bg:            #0d1320;
  --bg-subtle:     #121a2a;
  --bg-sunken:     #080d16;
  --surface:       #172033;
  --surface-2:     #1d273a;
  --border:        #29364c;
  --border-strong: #3a4b66;
  --text:          #f7faff;
  --text-secondary:#c7d2e4;
  --text-muted:    #8fa0b8;
  --text-on-accent:#ffffff;
  --accent:        #6cb8ff;
  --accent-hover:  #8cc8ff;
  --accent-soft:   #10263b;
  --accent-border: #2c5577;
  --focus-ring:    #6cb8ff;
  --grad-accent:   linear-gradient(135deg, #6cb8ff 0%, #3f7df1 54%, #2f9bf0 82%, #f39a80 100%);

  --tier-auto-bg: #0d2b24;
  --tier-auto-fg: #73ddb7;
  --tier-bulk-bg: #332818;
  --tier-bulk-fg: #f6c46c;
  --tier-review-bg: #351b22;
  --tier-review-fg: #ff9aa5;

  --sh-xs: 0 1px 2px rgba(0,0,0,0.4);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35);
  --sh-md: 0 4px 14px -2px rgba(0,0,0,0.5);
  --sh-lg: 0 16px 38px -10px rgba(0,0,0,0.6);
  --sh-xl: 0 30px 64px -16px rgba(0,0,0,0.7);
  --sh-accent: 0 14px 36px -10px rgba(70, 135, 255, 0.55);
}

[data-theme="dark"] .only-light { display: none !important; }
:root:not([data-theme="dark"]) .only-dark { display: none !important; }