/* ============================================================
   Doc-Portal — Design Tokens
   Theme: Portfolio Light + Amber (mirrors sulagnasasmal.com)
   Fonts: Outfit (headings) · Inter (body) · JetBrains Mono (code)
   ============================================================ */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Colour: Surfaces ── */
  --bg:             #f6f8fa;
  --bg-card:        #ffffff;
  --bg-elevated:    #ffffff;
  --bg-subtle:      #f0f6ff;

  /* ── Colour: Text ── */
  --text:           #1f2328;
  --text-secondary: #57606a;
  --text-muted:     #6e7781;
  --text-inverse:   #f6f8fa;

  /* ── Colour: Brand / Accent ── */
  --amber:          #d97706;
  --amber-hover:    #b45309;
  --amber-light:    #fef3c7;
  --amber-ring:     rgba(217, 119, 6, 0.25);

  /* ── Colour: Secondary accent (DocCraft indigo) ── */
  --indigo:         #4c6ef5;
  --indigo-hover:   #4263eb;
  --indigo-light:   #eef2ff;

  /* ── Colour: Teal (skill/category badges) ── */
  --teal:           #0d9488;
  --teal-light:     #f0fdfa;

  /* ── Colour: Status ── */
  --success:        #1a7f37;
  --success-light:  #dafbe1;
  --warning:        #9a6700;
  --warning-light:  #fff8c5;
  --error:          #cf222e;
  --error-light:    #ffebe9;

  /* ── Colour: Borders ── */
  --border:         #d0d7de;
  --border-light:   #e6eaef;
  --border-focus:   var(--amber);

  /* ── Colour: Traffic-light dots (macOS terminal panel) ── */
  --dot-red:    #ff5f57;
  --dot-yellow: #febc2e;
  --dot-green:  #28c840;

  /* ── Colour: Dark code island ── */
  --code-bg:    #0f172a;
  --code-text:  #e2e8f0;
  --code-key:   #7dd3fc;
  --code-str:   #86efac;
  --code-num:   #fdba74;
  --code-bool:  #c4b5fd;

  /* ── Type ── */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', monospace;

  /* ── Scale ── */
  --text-xs:   0.7rem;    /* 11.2px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md:   1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.5rem;    /* 40px */
  --text-5xl:  3.25rem;   /* 52px */

  /* ── Spacing (base-8) ── */
  --sp-1: 0.5rem;   /* 8px */
  --sp-2: 1rem;     /* 16px */
  --sp-3: 1.5rem;   /* 24px */
  --sp-4: 2rem;     /* 32px */
  --sp-5: 2.5rem;   /* 40px */
  --sp-6: 3rem;     /* 48px */
  --sp-8: 4rem;     /* 64px */
  --sp-10: 5rem;    /* 80px */
  --sp-12: 6rem;    /* 96px */

  /* ── Radii ── */
  --radius-sm:  6px;
  --radius:     8px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ── Card radius (premium feel) ── */
  --card-radius: 14px;

  /* ── Shadows ── */
  --shadow-sm:        0 1px 3px rgba(31,35,40,0.06), 0 1px 2px rgba(31,35,40,0.04);
  --shadow-card:      0 1px 3px rgba(31,35,40,0.04), 0 4px 16px rgba(31,35,40,0.06);
  --shadow-card-hover:0 8px 24px rgba(31,35,40,0.10), 0 20px 48px rgba(31,35,40,0.08);
  --shadow-hover:     0 4px 12px rgba(31,35,40,0.10), 0 12px 32px rgba(31,35,40,0.10);
  --shadow-amber:     0 4px 16px rgba(217,119,6,0.18);

  /* ── Layout ── */
  --nav-h:       64px;
  --content-max: 1280px;
  --content-mid: 800px;
  --sidebar-w:   260px;

  /* ── Transitions ── */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --duration:    0.22s;
}

/* ── Dark mode override ── */
[data-theme="dark"] {
  --bg:             #0d1117;
  --bg-card:        #161b22;
  --bg-elevated:    #21262d;
  --bg-subtle:      #1c2128;

  --text:           #e6edf3;
  --text-secondary: #8b949e;
  --text-muted:     #6e7681;
  --text-inverse:   #0d1117;

  --amber-light:    rgba(217, 119, 6, 0.15);
  --amber-hover:    #f59e0b;
  --indigo-light:   rgba(76, 110, 245, 0.15);
  --teal-light:     rgba(13, 148, 136, 0.15);

  --border:         #30363d;
  --border-light:   #21262d;

  --success-light:  rgba(26, 127, 55, 0.15);
  --warning-light:  rgba(154, 103, 0, 0.15);
  --error-light:    rgba(207, 34, 46, 0.15);

  --shadow-sm:        0 1px 3px rgba(0,0,0,0.3);
  --shadow-card:      0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);
  --shadow-card-hover:0 8px 24px rgba(0,0,0,0.45), 0 20px 48px rgba(0,0,0,0.35);
  --shadow-hover:     0 4px 12px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.3);
}

/* ── Base reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font: inherit; border: none; background: none; }
ul, ol { list-style: none; }