/* ==========================================================================
   The personal design system of Jan Lynnel Balitaan
   --------------------------------------------------------------------------
   One continuous path, from ticket to production.
   Tokens only. No component styles live in this file.
   ========================================================================== */

:root {
  /* ---- Brand constants (identical in both themes) ---------------------- */
  --brand-mint:     #00D9A3;   /* mint — primary accent                    */
  --brand-azure:    #3B8EFF;   /* azure — secondary, depth                 */
  --brand-teal:     #19B8D8;   /* midpoint of the brand gradient           */
  --brand-amber:    #FFB347;   /* amber — the terminal node, achievements  */
  --brand-violet:   #A78BFA;   /* violet — tertiary, used sparingly        */
  --brand-gradient: linear-gradient(135deg, var(--brand-mint), var(--brand-azure));

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:   0.75rem;    --fs-sm:   0.8125rem;  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;  --fs-lg:   1.25rem;    --fs-xl:   1.5rem;
  --fs-2xl:  2rem;       --fs-3xl:  2.75rem;    --fs-4xl:  clamp(2.5rem, 6vw, 4.25rem);

  --lh-tight: 1.15;  --lh-snug: 1.35;  --lh-base: 1.65;
  --tracking-wide: 0.08em;  --tracking-wider: 0.16em;

  /* ---- Space ----------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* ---- Form ------------------------------------------------------------ */
  --radius-sm: 6px;   --radius-md: 10px;  --radius-lg: 16px;
  --radius-xl: 22px;  --radius-pill: 999px;

  --container: 2160px;
  --container-narrow: 960px;
  --measure: 72ch;                      /* comfortable reading width for prose */
  --gutter: clamp(1rem, 3.5vw, 2.5rem); /* page side padding, scales with viewport */

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;  --dur: 260ms;  --dur-slow: 620ms;
}

/* ==========================================================================
   DARK THEME — the default. Deep ink, mint accents.
   ========================================================================== */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #06090D;
  --bg-alt:        #080D13;
  --surface:       #0C141D;
  --surface-raised:#111C27;
  --surface-sunken:#050809;

  --line:          #192634;
  --line-strong:   #27394B;

  --text:          #E6EDF5;
  --text-muted:    #93A4B8;
  --text-dim:      #64788E;

  --accent:        var(--brand-mint);
  --accent-mid:    var(--brand-teal);
  --accent-2:      var(--brand-azure);
  --accent-3:      var(--brand-amber);
  --accent-soft:   rgba(0, 217, 163, 0.10);
  --accent-line:   rgba(0, 217, 163, 0.28);
  --azure-soft:    rgba(59, 142, 255, 0.10);
  --amber-soft:    rgba(255, 179, 71, 0.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.65);
  --shadow-lg: 0 24px 64px -20px rgba(0,0,0,.8);
  --glow:      0 0 0 1px var(--accent-line), 0 12px 40px -12px rgba(0,217,163,.3);

  --grid-line: rgba(255,255,255,0.028);
  --scrim: rgba(6,9,13,0.82);
}

/* ==========================================================================
   LIGHT THEME — same brand, printed on paper. Accents darkened to hold
   WCAG AA contrast against light surfaces.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #F7F9FB;
  --bg-alt:        #FFFFFF;
  --surface:       #FFFFFF;
  --surface-raised:#FFFFFF;
  --surface-sunken:#EEF2F6;

  --line:          #E1E8EF;
  --line-strong:   #C8D4E0;

  --text:          #0B131C;
  --text-muted:    #4A5D72;
  --text-dim:      #6B7F94;

  --accent:        #00795C;   /* mint, darkened for AA on white */
  --accent-mid:    #11708B;   /* gradient midpoint, darkened    */
  --accent-2:      #1A5FC4;   /* azure, darkened               */
  --accent-3:      #9A5B00;   /* amber, darkened               */
  --accent-soft:   rgba(0, 121, 92, 0.08);
  --accent-line:   rgba(0, 121, 92, 0.22);
  --azure-soft:    rgba(26, 95, 196, 0.07);
  --amber-soft:    rgba(154, 91, 0, 0.10);

  --brand-gradient: linear-gradient(135deg, #00795C, #1A5FC4);

  --shadow-sm: 0 1px 2px rgba(16,32,48,.06);
  --shadow-md: 0 8px 24px -10px rgba(16,32,48,.18);
  --shadow-lg: 0 24px 60px -24px rgba(16,32,48,.26);
  --glow:      0 0 0 1px var(--accent-line), 0 12px 36px -14px rgba(0,121,92,.22);

  --grid-line: rgba(11,19,28,0.035);
  --scrim: rgba(247,249,251,0.85);
}

/* Follow the operating system until the visitor chooses for themselves. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #F7F9FB;            --bg-alt: #FFFFFF;
    --surface: #FFFFFF;       --surface-raised: #FFFFFF;
    --surface-sunken: #EEF2F6;
    --line: #E1E8EF;          --line-strong: #C8D4E0;
    --text: #0B131C;          --text-muted: #4A5D72;  --text-dim: #6B7F94;
    --accent: #00795C;        --accent-2: #1A5FC4;    --accent-3: #9A5B00;
    --accent-mid: #11708B;
    --accent-soft: rgba(0,121,92,.08);   --accent-line: rgba(0,121,92,.22);
    --azure-soft: rgba(26,95,196,.07);   --amber-soft: rgba(154,91,0,.10);
    --brand-gradient: linear-gradient(135deg, #00795C, #1A5FC4);
    --shadow-sm: 0 1px 2px rgba(16,32,48,.06);
    --shadow-md: 0 8px 24px -10px rgba(16,32,48,.18);
    --shadow-lg: 0 24px 60px -24px rgba(16,32,48,.26);
    --glow: 0 0 0 1px var(--accent-line), 0 12px 36px -14px rgba(0,121,92,.22);
    --grid-line: rgba(11,19,28,.035);
    --scrim: rgba(247,249,251,.85);
  }
}