/* ============================================================
   Poottu — Colors & Type
   Smart access intelligence. Quietly premium. Architectural.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Thin.ttf") format("truetype");        font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraLight.ttf") format("truetype");  font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Light.ttf") format("truetype");       font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Regular.ttf") format("truetype");     font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Medium.ttf") format("truetype");      font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");    font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Bold.ttf") format("truetype");        font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-ExtraBold.ttf") format("truetype");   font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Black.ttf") format("truetype");       font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Italic.ttf") format("truetype");      font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-MediumItalic.ttf") format("truetype");font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* ============================================================
     COLOR — Brand
     Single chromatic axis (signal blue) on a calm architectural
     neutral spine. Color is functional, not decorative.
     ============================================================ */

  /* Signal blue — the trust / access / intelligence cue */
  --poottu-50:  #EAF2FD;
  --poottu-100: #D2E2FA;
  --poottu-200: #A6C5F5;
  --poottu-300: #79A8EE;
  --poottu-400: #4D8FE8;
  --poottu-500: #307FE2;   /* Brand primary — Pantone 2727 C */
  --poottu-600: #2468BD;
  --poottu-700: #1A5197;
  --poottu-800: #133D71;
  --poottu-900: #0C2A4F;
  --poottu-950: #061629;

  /* Neutral spine — cool, architectural, slightly blued */
  --ink-0:   #FFFFFF;     /* paper */
  --ink-25:  #FAFBFD;     /* hairline mist */
  --ink-50:  #F4F6FA;     /* surface */
  --ink-100: #ECEFF4;     /* subtle fill */
  --ink-200: #DCE2EB;     /* hairline border */
  --ink-300: #C2CAD6;     /* divider strong */
  --ink-400: #97A1B0;     /* muted icon */
  --ink-500: #6B7587;     /* secondary text */
  --ink-600: #4B5566;     /* primary text on light, secondary */
  --ink-700: #323B4B;     /* primary text */
  --ink-800: #1E2533;     /* heading */
  --ink-900: #0F1622;     /* hero / deep ink */

  /* Semantic — calm, never alarming */
  --ok-500:    #1EA672;
  --ok-50:     #E6F6EE;
  --warn-500:  #E8A33D;
  --warn-50:   #FBF1DF;
  --danger-500:#D8443C;
  --danger-50: #FBE7E5;
  --info-500:  var(--poottu-500);
  --info-50:   var(--poottu-50);

  /* ============================================================
     SEMANTIC TOKENS
     Reference these — never raw scale values — in product UI.
     ============================================================ */
  --bg:           var(--ink-0);
  --bg-elev:      var(--ink-0);
  --bg-subtle:    var(--ink-50);
  --bg-muted:     var(--ink-100);
  --bg-inverse:   var(--ink-900);

  --fg:           var(--ink-800);
  --fg-strong:    var(--ink-900);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-400);
  --fg-on-brand:  #FFFFFF;
  --fg-on-inverse:#FFFFFF;

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus:  var(--poottu-500);

  --brand:         var(--poottu-500);
  --brand-hover:   var(--poottu-600);
  --brand-press:   var(--poottu-700);
  --brand-soft:    var(--poottu-50);
  --brand-on:      #FFFFFF;

  /* ============================================================
     RADII — soft, architectural, never playful
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION — low, atmospheric, blued
     Shadows are never black — they are tinted toward ink-900.
     ============================================================ */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(15, 22, 34, 0.04), 0 1px 1px rgba(15, 22, 34, 0.03);
  --elev-2: 0 4px 12px rgba(15, 22, 34, 0.06), 0 1px 2px rgba(15, 22, 34, 0.04);
  --elev-3: 0 10px 28px rgba(15, 22, 34, 0.08), 0 2px 4px rgba(15, 22, 34, 0.04);
  --elev-4: 0 24px 56px rgba(15, 22, 34, 0.12), 0 4px 8px rgba(15, 22, 34, 0.04);
  --elev-brand: 0 12px 32px rgba(48, 127, 226, 0.28);

  /* ============================================================
     SPACING — 4pt scale
     ============================================================ */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* ============================================================
     MOTION — short, glassy, never bouncy
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-4: 420ms;

  /* ============================================================
     TYPE — Montserrat across the board
     Architectural geometry. Generous tracking on display.
     ============================================================ */
  --font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Display — hero / cinematic moments */
  --display-1-size: 88px;  --display-1-line: 0.95; --display-1-weight: 800; --display-1-track: -0.03em;
  --display-2-size: 64px;  --display-2-line: 1.00; --display-2-weight: 800; --display-2-track: -0.025em;

  /* Headings */
  --h1-size: 48px; --h1-line: 1.08; --h1-weight: 700; --h1-track: -0.02em;
  --h2-size: 36px; --h2-line: 1.15; --h2-weight: 700; --h2-track: -0.015em;
  --h3-size: 28px; --h3-line: 1.20; --h3-weight: 600; --h3-track: -0.01em;
  --h4-size: 22px; --h4-line: 1.25; --h4-weight: 600; --h4-track: -0.005em;
  --h5-size: 18px; --h5-line: 1.30; --h5-weight: 600; --h5-track:  0;
  --h6-size: 15px; --h6-line: 1.35; --h6-weight: 600; --h6-track:  0.02em;

  /* Body */
  --body-lg-size: 18px;   --body-lg-line: 1.55; --body-lg-weight: 400;
  --body-size:    16px;   --body-line:    1.55; --body-weight: 400;
  --body-sm-size: 14px;   --body-sm-line: 1.50; --body-sm-weight: 400;
  --caption-size: 12px;   --caption-line: 1.40; --caption-weight: 500;

  /* Utility — UI labels, eyebrows */
  --label-size: 13px; --label-weight: 600; --label-track: 0.02em;
  --eyebrow-size: 12px; --eyebrow-weight: 700; --eyebrow-track: 0.16em; /* ALL CAPS */
  --mono-size: 13px;
}

/* ============================================================
   BASE — apply Montserrat globally, opt-in headings
   ============================================================ */
html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-size: var(--body-size); line-height: var(--body-line); font-weight: var(--body-weight); }

h1, .h1 { font-family: var(--font-sans); font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); letter-spacing: var(--h1-track); color: var(--fg-strong); margin: 0; }
h2, .h2 { font-family: var(--font-sans); font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); letter-spacing: var(--h2-track); color: var(--fg-strong); margin: 0; }
h3, .h3 { font-family: var(--font-sans); font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); letter-spacing: var(--h3-track); color: var(--fg-strong); margin: 0; }
h4, .h4 { font-family: var(--font-sans); font-size: var(--h4-size); line-height: var(--h4-line); font-weight: var(--h4-weight); letter-spacing: var(--h4-track); color: var(--fg-strong); margin: 0; }
h5, .h5 { font-family: var(--font-sans); font-size: var(--h5-size); line-height: var(--h5-line); font-weight: var(--h5-weight); letter-spacing: var(--h5-track); color: var(--fg-strong); margin: 0; }
h6, .h6 { font-family: var(--font-sans); font-size: var(--h6-size); line-height: var(--h6-line); font-weight: var(--h6-weight); letter-spacing: var(--h6-track); color: var(--fg-strong); margin: 0; }

.display-1 { font-size: var(--display-1-size); line-height: var(--display-1-line); font-weight: var(--display-1-weight); letter-spacing: var(--display-1-track); color: var(--fg-strong); }
.display-2 { font-size: var(--display-2-size); line-height: var(--display-2-line); font-weight: var(--display-2-weight); letter-spacing: var(--display-2-track); color: var(--fg-strong); }

.body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-line); font-weight: var(--body-lg-weight); }
.body    { font-size: var(--body-size);    line-height: var(--body-line);    font-weight: var(--body-weight); }
.body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-line); font-weight: var(--body-sm-weight); }
.caption { font-size: var(--caption-size); line-height: var(--caption-line); font-weight: var(--caption-weight); color: var(--fg-muted); }

.eyebrow { font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-track); text-transform: uppercase; color: var(--brand); }
.label   { font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-track); }
code, .mono { font-family: var(--font-mono); font-size: var(--mono-size); }