/* =====================================================================
   S.W.O TECHNOLOGY — Color & Type Foundations
   Smart Works · Optimal & Simple
   ---------------------------------------------------------------------
   NOTE: Exact brand hex values could not be auto-extracted from the live
   site (swo.vn) in this environment. The palette below is an inferred,
   on-brand tech system. Every value is a CSS variable — swap the four
   --brand-* anchors to re-skin the entire system instantly.
   ===================================================================== */

/* ----- Webfonts -----
   Be Vietnam Pro (300–800, latin + vietnamese) and JetBrains Mono (400/500)
   are now SELF-HOSTED in /fonts and declared via @font-face in fonts.css,
   imported just below. No CDN dependency — works fully offline, and the
   page never hangs on a blocked/slow font host.

   Both families fully support Vietnamese diacritics. The system-ui fallback
   in --font-body/-display keeps text legible during the brief font swap.
   (If S.W.O has an official corporate typeface, drop the files in /fonts,
   point these @font-face src at them, and keep the token names.) */

@import "fonts.css";

:root {
  /* =================================================================
     1. BRAND ANCHORS  — the 4 colors that define the whole identity
     ================================================================= */
  --brand-blue:      #1466E0;  /* primary — trust, technology        */
  --brand-blue-deep: #0B3FA8;  /* pressed / gradient end             */
  --brand-cyan:      #12C5C0;  /* accent — "smart / optimal" signal  */
  --brand-ink:       #0A1730;  /* near-black navy — text & dark UI   */

  /* =================================================================
     2. PRIMARY (BLUE) SCALE
     ================================================================= */
  --blue-50:  #EAF1FE;
  --blue-100: #D2E1FD;
  --blue-200: #A6C3FB;
  --blue-300: #6E9BF4;
  --blue-400: #3D7AEC;
  --blue-500: #1466E0;   /* = --brand-blue */
  --blue-600: #0F54C2;
  --blue-700: #0B3FA8;   /* = --brand-blue-deep */
  --blue-800: #0A327F;
  --blue-900: #0B2659;

  /* =================================================================
     3. ACCENT (CYAN / TEAL) SCALE
     ================================================================= */
  --cyan-50:  #E4FAF9;
  --cyan-100: #C0F3F0;
  --cyan-200: #88E7E3;
  --cyan-300: #45D6D1;
  --cyan-400: #12C5C0;   /* = --brand-cyan */
  --cyan-500: #0EA8A4;
  --cyan-600: #0B8784;
  --cyan-700: #0A6A68;

  /* =================================================================
     4. NEUTRALS  — cool, navy-tinted grays
     ================================================================= */
  --ink-950: #060E1F;
  --ink-900: #0A1730;   /* = --brand-ink */
  --ink-800: #142544;
  --ink-700: #233655;
  --gray-600: #3A4A63;
  --gray-500: #54657F;
  --gray-400: #6B7A93;
  --gray-300: #97A4B8;
  --gray-200: #C5D0DF;
  --gray-150: #D9E2EF;
  --gray-100: #E8EEF6;
  --gray-75:  #F0F4FA;
  --gray-50:  #F6F9FD;
  --white:    #FFFFFF;

  /* =================================================================
     5. SEMANTIC COLOR ROLES
     ================================================================= */
  --fg-1: var(--ink-900);   /* primary text / headlines  */
  --fg-2: var(--gray-600);  /* body text                 */
  --fg-3: var(--gray-400);  /* muted / captions          */
  --fg-on-brand: #FFFFFF;   /* text on blue / ink        */

  --bg-1: var(--white);     /* page                      */
  --bg-2: var(--gray-50);   /* subtle section            */
  --bg-3: var(--gray-100);  /* sunken / card alt         */
  --bg-ink: var(--ink-900); /* dark sections             */

  --border-1: var(--gray-150);
  --border-2: var(--gray-200);
  --border-strong: var(--gray-300);

  --accent: var(--brand-blue);
  --accent-hover: var(--blue-600);
  --accent-press: var(--blue-700);
  --accent-soft: var(--blue-50);

  --success: #16A34A;
  --success-soft: #E7F6EC;
  --warning: #E5910B;
  --warning-soft: #FDF1DC;
  --danger:  #E5484D;
  --danger-soft:  #FCE9E9;
  --info: var(--brand-blue);
  --info-soft: var(--blue-50);

  /* =================================================================
     6. BRAND GRADIENTS
     ================================================================= */
  --grad-brand:  linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
  --grad-smart:  linear-gradient(135deg, var(--brand-cyan) 0%, var(--blue-500) 100%);
  --grad-ink:    linear-gradient(160deg, var(--ink-800) 0%, var(--ink-950) 100%);
  --grad-mesh:   radial-gradient(900px 400px at 12% -10%, rgba(18,197,192,.18), transparent 60%),
                 radial-gradient(800px 500px at 100% 0%, rgba(20,102,224,.22), transparent 55%); /* @kind color */

  /* =================================================================
     7. TYPOGRAPHY
     ================================================================= */
  --font-display: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-body:    'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* type scale (1.250 major-third-ish, tuned) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  76px;

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.14em;  /* eyebrow / overline labels */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* =================================================================
     8. SPACING  (4px base)
     ================================================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* =================================================================
     9. RADII
     ================================================================= */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* =================================================================
     10. ELEVATION / SHADOWS  (cool, navy-based)
     ================================================================= */
  --shadow-xs: 0 1px 2px rgba(10,23,48,.06);
  --shadow-sm: 0 2px 6px rgba(10,23,48,.07);
  --shadow-md: 0 8px 20px -6px rgba(10,23,48,.12);
  --shadow-lg: 0 18px 40px -12px rgba(10,23,48,.18);
  --shadow-xl: 0 30px 60px -16px rgba(10,23,48,.24);
  --shadow-brand: 0 14px 30px -8px rgba(20,102,224,.40);
  --shadow-cyan:  0 14px 30px -8px rgba(18,197,192,.38);
  --ring-focus: 0 0 0 4px rgba(20,102,224,.30);
}

/* =====================================================================
   SEMANTIC TYPE CLASSES  (use directly on elements)
   ===================================================================== */
.swo-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-blue);
}
.swo-display {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: clamp(40px, 6vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.swo-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.swo-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.swo-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.swo-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.swo-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.swo-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.swo-small {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
.swo-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--fg-2);
}