/* =====================================================================
   Plan.U — Design Tokens
   Colors and Type
   --------------------------------------------------------------------
   Source: Manual de Identidade Visual Plan.U (Thaís Guimarães Design)
   Fonts: Kanit (display/titles) and Prompt (body/signature) — both
   from Google Fonts.
   ===================================================================== */

/* --- Web fonts ------------------------------------------------------- */
/* Kanit — self-hosted (brand-supplied TTFs in /fonts) */
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-Thin.ttf')        format('truetype'); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-ThinItalic.ttf')  format('truetype'); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-ExtraLight.ttf')  format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-ExtraLightItalic.ttf') format('truetype'); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-Light.ttf')       format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-LightItalic.ttf') format('truetype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-Regular.ttf')     format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-Italic.ttf')      format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-Medium.ttf')      format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-SemiBold.ttf')    format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-SemiBoldItalic.ttf') format('truetype'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-Bold.ttf')        format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-BoldItalic.ttf')  format('truetype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-ExtraBold.ttf')   format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-ExtraBoldItalic.ttf') format('truetype'); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-Black.ttf')       format('truetype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Kanit'; src:url('fonts/Kanit-BlackItalic.ttf') format('truetype'); font-weight:900; font-style:italic; font-display:swap; }

/* Prompt — self-hosted (brand-supplied TTFs in /fonts) */
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-Thin.ttf')        format('truetype'); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-ThinItalic.ttf')  format('truetype'); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-ExtraLight.ttf')  format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-ExtraLightItalic.ttf') format('truetype'); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-Light.ttf')       format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-LightItalic.ttf') format('truetype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-Regular.ttf')     format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-Italic.ttf')      format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-Medium.ttf')      format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-SemiBold.ttf')    format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-SemiBoldItalic.ttf') format('truetype'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-Bold.ttf')        format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-BoldItalic.ttf')  format('truetype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-ExtraBold.ttf')   format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-ExtraBoldItalic.ttf') format('truetype'); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-Black.ttf')       format('truetype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Prompt'; src:url('fonts/Prompt-BlackItalic.ttf') format('truetype'); font-weight:900; font-style:italic; font-display:swap; }

:root {
  /* ============ BRAND CORE COLORS (from manual, page 12) ============ */
  /* Primary — Azul Profundo (Verde-azulado escuro). The signature color. */
  --planu-deep:        #062F35;   /* CMYK 99,31,34,90 */
  /* Almost-black navy — used for body copy, dark surfaces */
  --planu-ink:         #161F28;   /* CMYK 100,61,32,96 */
  /* Light cyan-blue — accent, highlights, "young & innovative" pop */
  --planu-sky:         #A0D6E9;   /* CMYK 37,0,0,0 */
  /* Neutral gray — secondary text, dividers, timbrado lines */
  --planu-gray:        #A4A6A4;   /* CMYK 33,24,20,2 */
  --planu-white:       #FFFFFF;

  /* ============ EXTENDED RAMPS (from manual, page 13) =============== */
  /* Each base color has a lighter and darker companion for web use.   */

  /* Sky / azul claro */
  --planu-sky-100:     #E1F4F9;   /* very light wash */
  --planu-sky-200:     #C3EAF4;   /* hover backgrounds */
  --planu-sky-500:     #A0D6E9;   /* base */

  /* Deep / azul profundo */
  --planu-deep-300:    #2A696B;   /* lifted teal */
  --planu-deep-500:    #124549;   /* mid */
  --planu-deep-700:    #062F35;   /* base */

  /* Ink / azul escuro */
  --planu-ink-300:     #485F70;   /* muted slate */
  --planu-ink-500:     #263644;   /* mid */
  --planu-ink-700:     #161F28;   /* base */

  /* Gray */
  --planu-gray-100:    #F2F3F2;   /* near-white surface */
  --planu-gray-200:    #DDDDDD;   /* light divider */
  --planu-gray-500:    #A4A6A4;   /* base */
  --planu-gray-700:    #686868;   /* muted text */

  /* ============ SEMANTIC TOKENS ===================================== */
  /* Backgrounds */
  --bg:                var(--planu-white);
  --bg-elevated:       var(--planu-white);
  --bg-muted:          var(--planu-gray-100);
  --bg-inverse:        var(--planu-deep-700);
  --bg-ink:            var(--planu-ink-700);
  --bg-accent-soft:    var(--planu-sky-100);

  /* Foreground / text */
  --fg:                var(--planu-ink-700);   /* primary text */
  --fg-muted:          var(--planu-ink-300);   /* secondary text */
  --fg-subtle:         var(--planu-gray-700);  /* tertiary text */
  --fg-on-dark:        var(--planu-white);
  --fg-on-accent:      var(--planu-deep-700);
  --fg-link:           var(--planu-deep-700);
  --fg-link-hover:     var(--planu-deep-500);

  /* Borders */
  --border:            var(--planu-gray-200);
  --border-strong:     var(--planu-gray-500);
  --border-on-dark:    rgba(255,255,255,0.14);

  /* Accents */
  --accent:            var(--planu-sky-500);
  --accent-strong:     var(--planu-deep-700);

  /* Status (derived to stay on-brand; not in manual) */
  --status-info:       #A0D6E9;
  --status-success:    #2A696B;
  --status-warning:    #C9A227;
  --status-danger:     #B23A3A;

  /* ============ TYPOGRAPHY ========================================== */
  --font-display:      'Kanit', 'Helvetica Neue', Arial, sans-serif;
  --font-body:         'Prompt', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:         ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Modular type scale — 1.250 (Major Third) anchored at 16px */
  --fs-12:  0.75rem;   /* 12 — micro/labels */
  --fs-14:  0.875rem;  /* 14 — small */
  --fs-16:  1rem;      /* 16 — body */
  --fs-18:  1.125rem;  /* 18 — body-lg */
  --fs-20:  1.25rem;   /* 20 — lead */
  --fs-24:  1.5rem;    /* 24 — h4 */
  --fs-30:  1.875rem;  /* 30 — h3 */
  --fs-36:  2.25rem;   /* 36 — h2 */
  --fs-48:  3rem;      /* 48 — h1 */
  --fs-64:  4rem;      /* 64 — display */
  --fs-80:  5rem;      /* 80 — hero */

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;   /* eyebrows / small caps */

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

  /* ============ RADII =============================================== */
  /* The brand is built on hard-edged organic geometric forms (the
     grafismos). Corners stay tight and architectural. */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-pill:  999px;

  /* ============ ELEVATION =========================================== */
  --shadow-xs:   0 1px 2px rgba(22, 31, 40, 0.06);
  --shadow-sm:   0 2px 6px rgba(22, 31, 40, 0.08);
  --shadow-md:   0 6px 18px rgba(22, 31, 40, 0.10);
  --shadow-lg:   0 18px 40px rgba(6, 47, 53, 0.16);
  --shadow-inset:inset 0 0 0 1px rgba(22, 31, 40, 0.06);

  /* ============ MOTION ============================================== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-engineer: cubic-bezier(0.65, 0, 0.35, 1); /* deliberate, technical */
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      360ms;

  /* ============ LAYOUT ============================================== */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1360px;
  --grid-gutter:      24px;
}

/* =====================================================================
   SEMANTIC TYPE CLASSES
   ===================================================================== */
html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / headings — Kanit */
.planu-display,
.planu-h1, .planu-h2, .planu-h3, .planu-h4 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.planu-display {
  font-size: clamp(3rem, 6vw, var(--fs-80));
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.planu-h1 { font-size: var(--fs-48); font-weight: 700; }
.planu-h2 { font-size: var(--fs-36); font-weight: 600; }
.planu-h3 { font-size: var(--fs-30); font-weight: 600; line-height: var(--lh-snug); }
.planu-h4 { font-size: var(--fs-24); font-weight: 500; line-height: var(--lh-snug); }

/* Eyebrow / kicker — used liberally above titles for technical labels */
.planu-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--planu-deep-300);
}

/* Body — Prompt */
.planu-lead {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  font-weight: 300;
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.planu-body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg);
  text-wrap: pretty;
}
.planu-small {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.planu-caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-subtle);
  text-transform: uppercase;
}

/* Mono — engineering data, dimensions, coordinates */
.planu-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-variant-numeric: tabular-nums;
}

/* Element defaults so plain HTML inherits Plan.U look ---------------- */
h1 { font: 700 var(--fs-48)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
h2 { font: 600 var(--fs-36)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
h3 { font: 600 var(--fs-30)/var(--lh-snug) var(--font-display); }
h4 { font: 500 var(--fs-24)/var(--lh-snug) var(--font-display); }
h5 { font: 500 var(--fs-20)/var(--lh-snug) var(--font-display); }
h6 { font: 600 var(--fs-12)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--planu-deep-300); }
p  { margin: 0 0 1em; }
a  { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--fg-link-hover); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
::selection { background: var(--planu-sky-200); color: var(--planu-deep-700); }