/* ================================================================
   IHUNGO DESIGN SYSTEM — Tokens
   Colors, Typography, Spacing, Radii, Shadows
   v1.0 · 2026
   ================================================================ */

/* Fonts: Sora (headings) + Inter (body, used as Helbert Sans substitute)
   Helbert Sans is not freely available; Inter has the closest geometric/UI
   feel. Replace @import + --font-body if you obtain the original Helbert. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary — Naranja Ihungo */
  --primary-dark:   #D47030;
  --primary:        #E4873B;
  --primary-light:  #F2C5A8;
  --primary-10:     #F9E8DD;

  /* Secondary — Azul Ihungo */
  --secondary-dark:  #1F34A0;
  --secondary:       #2949DA;
  --secondary-light: #B8BFEA;
  --secondary-10:    #EAEDFA;

  /* ---------- SEMANTIC ---------- */
  --success:        #00B894;
  --success-bg:     #E0F6F1;
  --danger:         #E17055;
  --danger-bg:      #FBE8E1;
  --warning:        #FDCB6E;
  --warning-bg:     #FEF5E0;
  --info:           #74B9FF;
  --info-bg:        #E5F1FE;

  /* ---------- NEUTRALS (greyscale) ---------- */
  --neutral-900: #1A1A2E;
  --neutral-800: #232338;
  --neutral-700: #2D2D44;
  --neutral-600: #4A4A66;
  --neutral-500: #6B6B8A;
  --neutral-400: #8E8EA8;
  --neutral-300: #B8B8C8;
  --neutral-200: #D0D0D8;
  --neutral-100: #E0E0E8;
  --neutral-75:  #ECECF2;
  --neutral-50:  #F8F8FA;
  --neutral-0:   #FFFFFF;

  /* ---------- SEMANTIC TOKENS — LIGHT (default) ---------- */
  --bg-canvas:      #F8F8FA;
  --bg-surface:     #FFFFFF;
  --bg-subtle:      #ECECF2;
  --bg-overlay:     rgba(26, 26, 46, 0.60);

  --fg-primary:     #1A1A2E;   /* Headings, primary text */
  --fg-secondary:   #4A4A66;   /* Body text */
  --fg-tertiary:    #6B6B8A;   /* Helpers, captions */
  --fg-muted:       #8E8EA8;   /* Disabled, placeholders */
  --fg-on-primary:  #FFFFFF;
  --fg-on-secondary:#FFFFFF;
  --fg-link:        #2949DA;

  --border-subtle:  #E0E0E8;
  --border-default: #D0D0D8;
  --border-strong:  #B8B8C8;
  --border-focus:   #2949DA;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif; /* Helbert Sans substitute */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Scale — rescaled for multi-platform legibility (PDF was print-spec).
     Roles preserved from PDF; sizes rounded to multiples of 4. */
  --text-display-xl: 56px;   /* Hero */
  --text-display-lg: 40px;   /* View titles */
  --text-h1:         32px;
  --text-h2:         24px;
  --text-h3:         20px;
  --text-body-lg:    18px;
  --text-body-md:    16px;
  --text-body-sm:    14px;
  --text-label:      12px;
  --text-caption:    11px;

  --leading-tight:   1.2;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-loose:   1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

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

  /* ---------- SPACING (8pt base) ---------- */
  --space-0:  0;
  --space-1:  4px;   /* xs */
  --space-2:  8px;   /* sm */
  --space-3:  12px;
  --space-4:  16px;  /* md */
  --space-5:  20px;
  --space-6:  24px;  /* lg */
  --space-8:  32px;  /* xl */
  --space-10: 40px;
  --space-12: 48px;  /* 2xl */
  --space-16: 64px;  /* 3xl */
  --space-20: 80px;

  /* ---------- RADIUS ---------- */
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-1: 0 1px 3px rgba(26, 26, 46, 0.08);
  --shadow-2: 0 2px 6px rgba(26, 26, 46, 0.12);
  --shadow-3: 0 4px 12px rgba(26, 26, 46, 0.15);
  --shadow-4: 0 8px 24px rgba(26, 26, 46, 0.20);
  --shadow-focus: 0 0 0 3px rgba(41, 73, 218, 0.20);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ---------- ICON SIZES ---------- */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --navbar-height: 64px;
  --sidebar-width: 240px;
}

/* ---------- DARK MODE ---------- */
[data-theme="dark"] {
  --bg-canvas:      #0F0F1F;
  --bg-surface:     #1A1A2E;
  --bg-subtle:      #232338;
  --bg-overlay:     rgba(0, 0, 0, 0.70);

  --fg-primary:     #F8F8FA;
  --fg-secondary:   #D0D0D8;
  --fg-tertiary:    #B8B8C8;
  --fg-muted:       #6B6B8A;
  --fg-on-primary:  #FFFFFF;
  --fg-on-secondary:#FFFFFF;
  --fg-link:        #B8BFEA;

  --border-subtle:  #2D2D44;
  --border-default: #4A4A66;
  --border-strong:  #6B6B8A;
  --border-focus:   #B8BFEA;

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.50);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.60);
  --shadow-focus: 0 0 0 3px rgba(184, 191, 234, 0.30);
}

/* ================================================================
   SEMANTIC ELEMENT STYLES
   ================================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-h1);   font-weight: var(--weight-bold);     line-height: var(--leading-snug); }
h2 { font-size: var(--text-h2);   font-weight: var(--weight-bold);     line-height: var(--leading-snug); }
h3 { font-size: var(--text-h3);   font-weight: var(--weight-semibold); line-height: 1.35; }
h4 { font-size: var(--text-body-lg); font-weight: var(--weight-semibold); line-height: 1.4; }

p { margin: 0; font-size: var(--text-body-md); line-height: var(--leading-loose); color: var(--fg-secondary); }
small { font-size: var(--text-body-sm); color: var(--fg-tertiary); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-subtle);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--secondary-dark);
}

a { color: var(--fg-link); text-decoration: none; transition: opacity var(--duration-fast) var(--ease-out); }
a:hover { opacity: 0.8; }

::selection { background: var(--secondary-light); color: var(--neutral-900); }