/* ============================================================
   CROL DESIGN SYSTEM — Colors & Typography Tokens
   Source: Crol Brandbook v1 (2025)
   ============================================================ */

/* --- Mulish (Primary typeface) ---------------------------- */
@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Secondary: Brandbook names Eurostile (commercial).
   Substituted with Rajdhani from Google Fonts — closest free match
   (geometric, squared terminals, condensed feel). FLAGGED to user. */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&display=swap');

:root {
  /* ---------- BRAND PALETTE (official) ------------------- */
  --crol-neon-lime:       #00E100;  /* Primary accent */
  --crol-timeless-green:  #132624;  /* Deep teal-black brand base */
  --crol-action-green:    #37B35C;  /* Success / CTA secondary */
  --crol-dark:            #000000;
  --crol-bright:          #FFFFFF;

  /* ---------- EXTENSION PALETTE (sub-product accents) --- */
  --crol-ext-deep:        #4A3C8F;
  --crol-ext-ocean:       #418DFF;
  --crol-ext-leaf:        #18BCB0;
  --crol-ext-sky:         #47C2FF;
  --crol-ext-rosewood:    #CB5A90;
  --crol-ext-royal:       #174D7C;

  /* ---------- TINT / SHADE SCALE (derived) -------------- */
  --lime-50:   #E6FFE6;
  --lime-100:  #B8FFB8;
  --lime-200:  #7AFF7A;
  --lime-300:  #3BF53B;
  --lime-400:  #00E100;  /* brand */
  --lime-500:  #00C400;
  --lime-600:  #00A300;
  --lime-700:  #007D00;

  --green-50:  #ECF6EF;
  --green-100: #CFE8D7;
  --green-200: #9DD2AF;
  --green-300: #6BBC87;
  --green-400: #37B35C;  /* brand */
  --green-500: #2A8E47;
  --green-600: #1F6A36;
  --green-700: #154625;

  --ink-50:   #F2F5F5;
  --ink-100:  #D8DEDE;
  --ink-200:  #A9B5B4;
  --ink-300:  #6E807E;
  --ink-400:  #3A4F4D;
  --ink-500:  #233734;
  --ink-600:  #1A2E2B;
  --ink-700:  #132624;   /* Timeless Green */
  --ink-800:  #0A1413;
  --ink-900:  #000000;

  /* ---------- SEMANTIC (light surface) ------------------ */
  --bg:            #FFFFFF;
  --bg-subtle:     #F7F9F9;
  --bg-muted:      #EEF2F1;
  --surface:       #FFFFFF;
  --surface-raised:#FFFFFF;

  --fg:            #132624;    /* primary text on light */
  --fg-1:          #132624;
  --fg-2:          #3A4F4D;    /* secondary text */
  --fg-3:          #6E807E;    /* tertiary / meta */
  --fg-muted:      #A9B5B4;    /* placeholder, disabled */
  --fg-on-accent:  #132624;    /* text on neon-lime */
  --fg-on-dark:    #FFFFFF;

  --border:        #E2E8E7;
  --border-strong: #C9D3D1;
  --divider:       #EEF2F1;

  --accent:        #00E100;
  --accent-hover:  #00C400;
  --accent-press:  #00A300;

  --success:       #37B35C;
  --warning:       #E8A317;
  --danger:        #D64545;
  --info:          #418DFF;

  /* ---------- SEMANTIC (dark surface) ------------------- */
  --dark-bg:            #0A1413;
  --dark-bg-subtle:     #132624;
  --dark-bg-muted:      #1A2E2B;
  --dark-surface:       #132624;
  --dark-surface-raised:#1A2E2B;
  --dark-fg:            #FFFFFF;
  --dark-fg-2:          #C9D3D1;
  --dark-fg-3:          #A9B5B4;
  --dark-border:        #233734;

  /* ---------- TYPOGRAPHY — families --------------------- */
  --font-sans:    'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-tech:    'Rajdhani', 'Mulish', sans-serif;  /* Eurostile substitute */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (derived from brandbook
     hierarchy: 106 / 70 / 16 pt) ------------------------- */
  --fs-display:   clamp(56px, 7.5vw, 106px);
  --fs-h1:        clamp(40px, 5vw, 70px);
  --fs-h2:        clamp(32px, 3.5vw, 48px);
  --fs-h3:        28px;
  --fs-h4:        22px;
  --fs-h5:        18px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;
  --fs-micro:     10px;

  /* ---------- LETTER SPACING (brandbook uses spaced caps) */
  --ls-display:   -0.02em;
  --ls-heading:   -0.01em;
  --ls-body:      0;
  --ls-label:     0.04em;
  --ls-section:   0.24em;   /* e.g. "C R O L   R E - B R A N D I N G" */

  /* ---------- SPACING (8-pt grid) ----------------------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ---------- RADII ------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-greon: 18%;   /* Greon isotipo — rounded-square ratio */

  /* ---------- SHADOWS / ELEVATION ----------------------- */
  --shadow-xs:  0 1px 2px rgba(19, 38, 36, 0.06);
  --shadow-sm:  0 2px 6px rgba(19, 38, 36, 0.08);
  --shadow-md:  0 6px 16px rgba(19, 38, 36, 0.10);
  --shadow-lg:  0 14px 36px rgba(19, 38, 36, 0.14);
  --shadow-xl:  0 24px 60px rgba(19, 38, 36, 0.18);
  --shadow-glow:0 0 0 4px rgba(0, 225, 0, 0.22);   /* Neon Lime focus glow */
  --shadow-inset-hair: inset 0 0 0 1px rgba(19, 38, 36, 0.08);

  /* ---------- MOTION ------------------------------------ */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ---------- LAYOUT ------------------------------------ */
  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1440px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Apply with plain HTML tags or .cds-* classes.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.cds-display, h1.display {
  font-family: var(--font-display);
  font-weight: 900;               /* Mulish Black */
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}

h1, .cds-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  margin: 0;
}

h2, .cds-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  margin: 0;
}

h3, .cds-h3 {
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin: 0;
}

h4, .cds-h4 {
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.25;
  margin: 0;
}

h5, .cds-h5 {
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: 1.3;
  margin: 0;
}

p, .cds-body {
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  text-wrap: pretty;
  margin: 0;
}

.cds-body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  font-weight: 400;
}

.cds-body-sm { font-size: var(--fs-body-sm); line-height: 1.5; }

small, .cds-caption {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-3);
}

.cds-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--fg-2);
}

.cds-label {
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.cds-tagline {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
}

code, pre, .cds-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

a { color: inherit; text-decoration: none; }
a.cds-link {
  color: var(--fg);
  border-bottom: 1.5px solid var(--accent);
  transition: color var(--dur-fast) var(--ease-out);
}
a.cds-link:hover { color: var(--accent-press); }

::selection { background: var(--crol-neon-lime); color: var(--crol-timeless-green); }