/* =============================================================
   Proton AI — colors_and_type.css
   Import this file first; it defines all design tokens.
   ============================================================= */

/* ---------- Cabin (brand font, local files) ---------- */
@font-face { font-family:'Cabin'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Cabin-Regular.ttf') format('truetype'); }
@font-face { font-family:'Cabin'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/Cabin-Italic.ttf') format('truetype'); }
@font-face { font-family:'Cabin'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/Cabin-Medium.ttf') format('truetype'); }
@font-face { font-family:'Cabin'; font-style:italic; font-weight:500; font-display:swap; src:url('fonts/Cabin-MediumItalic.ttf') format('truetype'); }
@font-face { font-family:'Cabin'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/Cabin-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Cabin'; font-style:italic; font-weight:600; font-display:swap; src:url('fonts/Cabin-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Cabin'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Cabin-Bold.ttf') format('truetype'); }
@font-face { font-family:'Cabin'; font-style:italic; font-weight:700; font-display:swap; src:url('fonts/Cabin-BoldItalic.ttf') format('truetype'); }

/* Semi-condensed family (available as 'Cabin SC' for tight UI labels) */
@font-face { font-family:'Cabin SC'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Cabin_SemiCondensed-Regular.ttf') format('truetype'); }
@font-face { font-family:'Cabin SC'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/Cabin_SemiCondensed-Italic.ttf') format('truetype'); }
@font-face { font-family:'Cabin SC'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/Cabin_SemiCondensed-Medium.ttf') format('truetype'); }
@font-face { font-family:'Cabin SC'; font-style:italic; font-weight:500; font-display:swap; src:url('fonts/Cabin_SemiCondensed-MediumItalic.ttf') format('truetype'); }
@font-face { font-family:'Cabin SC'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/Cabin_SemiCondensed-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Cabin SC'; font-style:italic; font-weight:600; font-display:swap; src:url('fonts/Cabin_SemiCondensed-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Cabin SC'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Cabin_SemiCondensed-Bold.ttf') format('truetype'); }
@font-face { font-family:'Cabin SC'; font-style:italic; font-weight:700; font-display:swap; src:url('fonts/Cabin_SemiCondensed-BoldItalic.ttf') format('truetype'); }

/* Condensed family (available as 'Cabin Condensed' for dense data tables) */
@font-face { font-family:'Cabin Condensed'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Cabin_Condensed-Regular.ttf') format('truetype'); }
@font-face { font-family:'Cabin Condensed'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/Cabin_Condensed-Italic.ttf') format('truetype'); }
@font-face { font-family:'Cabin Condensed'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/Cabin_Condensed-Medium.ttf') format('truetype'); }
@font-face { font-family:'Cabin Condensed'; font-style:italic; font-weight:500; font-display:swap; src:url('fonts/Cabin_Condensed-MediumItalic.ttf') format('truetype'); }
@font-face { font-family:'Cabin Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/Cabin_Condensed-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Cabin Condensed'; font-style:italic; font-weight:600; font-display:swap; src:url('fonts/Cabin_Condensed-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Cabin Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Cabin_Condensed-Bold.ttf') format('truetype'); }
@font-face { font-family:'Cabin Condensed'; font-style:italic; font-weight:700; font-display:swap; src:url('fonts/Cabin_Condensed-BoldItalic.ttf') format('truetype'); }

:root {
  /* ---------- Brand colors (raw) ---------- */
  --indigo:        #0D0745;
  --indigo-90:     #231C54;   /* hover variants */
  --indigo-80:     #3A3463;
  --indigo-8:      rgba(13, 7, 69, 0.08);   /* hairline border */
  --indigo-6:      rgba(13, 7, 69, 0.06);   /* card border */
  --indigo-4:      rgba(13, 7, 69, 0.04);   /* subtle fill */

  --lime:          #D6EC4C;
  --lime-dark:     #BED238;   /* hover */
  --lime-darker:   #A5B72A;   /* press */

  --blue:          #2169D4;
  --blue-dark:     #1A56B5;   /* hover */
  --blue-10:       rgba(33, 105, 212, 0.10);

  --off-white:     #F8F9F9;
  --white:         #FFFFFF;

  --coral:         #EE7F59;
  --coral-dark:    #D66A46;

  /* ---------- Neutral grays (derived, warm indigo undertone) ---------- */
  --gray-900:      #0D0745;   /* same as indigo */
  --gray-800:      #1F1A4A;
  --gray-700:      #3A3560;
  --gray-600:      #5A5578;   /* body text default */
  --gray-500:      #7B7792;   /* caption / meta */
  --gray-400:      #A8A5B8;
  --gray-300:      #D1CFD9;
  --gray-200:      #E7E6EC;
  --gray-100:      #F0EFF3;
  --gray-50:       #F8F9F9;

  /* ---------- Semantic colors ---------- */
  --color-bg:              var(--off-white);
  --color-bg-raised:       var(--white);
  --color-bg-inverse:      var(--indigo);
  --color-fg:              var(--indigo);
  --color-fg-muted:        var(--gray-600);
  --color-fg-subtle:       var(--gray-500);
  --color-fg-inverse:      var(--white);
  --color-border:          var(--indigo-8);
  --color-border-strong:   rgba(13, 7, 69, 0.16);
  --color-link:            var(--blue);
  --color-link-hover:      var(--blue-dark);
  --color-accent:          var(--lime);
  --color-accent-warm:     var(--coral);
  --color-success:         #1F9D55;
  --color-warning:         var(--coral);
  --color-danger:          #D64545;

  /* ---------- Typography ---------- */
  --font-sans:     'Cabin', Arial, system-ui, -apple-system, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (px) */
  --fs-display:    48px;
  --fs-h1:         36px;
  --fs-h2:         28px;
  --fs-h3:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-micro:      12px;

  /* Weights */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* Line heights */
  --lh-tight:      1.15;
  --lh-heading:    1.2;
  --lh-snug:       1.35;
  --lh-body:       1.5;
  --lh-loose:      1.65;

  /* Letter spacing */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-label:   0.06em;  /* small caps labels */

  /* ---------- Spacing (8px grid) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;
  --radius-mark: 22%;   /* the Proton app-mark corner curve */

  /* ---------- Shadows ---------- */
  --shadow-sm:    0 1px 2px rgba(13, 7, 69, 0.06);
  --shadow-md:    0 4px 12px rgba(13, 7, 69, 0.08);
  --shadow-lg:    0 16px 40px rgba(13, 7, 69, 0.10);
  --shadow-xl:    0 32px 80px rgba(13, 7, 69, 0.14);
  --shadow-focus: 0 0 0 3px rgba(33, 105, 212, 0.25);

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     120ms;
  --dur-base:     180ms;
  --dur-slow:     280ms;

  /* ---------- Layout ---------- */
  --max-w-prose:    72ch;
  --max-w-content:  1200px;
  --max-w-wide:     1440px;
  --nav-h:          64px;
  --sidebar-w:      240px;
}

/* =============================================================
   Base
   ============================================================= */

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

*, *::before, *::after { box-sizing: border-box; }

/* =============================================================
   Semantic element styles
   ============================================================= */

h1, .h1, .display {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-h1), 4vw, var(--fs-display));
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h2, .h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}

h3, .h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--color-fg);
  margin: 0 0 var(--sp-2);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg-muted);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); }
.body-sm { font-size: var(--fs-body-sm); }
.caption  { font-size: var(--fs-caption); color: var(--color-fg-subtle); line-height: var(--lh-snug); }
.micro    { font-size: var(--fs-micro);   color: var(--color-fg-subtle); }

.label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 2px; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--gray-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--sp-6) 0;
}

::selection { background: var(--lime); color: var(--indigo); }

/* =============================================================
   Reusable primitives
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--indigo);
  color: var(--white);
}
.btn-primary:hover { background: var(--indigo-90); }

.btn-lime {
  background: var(--lime);
  color: var(--indigo);
}
.btn-lime:hover { background: var(--lime-dark); }

.btn-secondary {
  background: transparent;
  color: var(--indigo);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--indigo-4); }

.btn-ghost {
  background: transparent;
  color: var(--indigo);
}
.btn-ghost:hover { background: var(--indigo-4); }

.card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
}
.pill-lime  { background: var(--lime); color: var(--indigo); }
.pill-coral { background: var(--coral); color: var(--white); }
.pill-blue  { background: var(--blue-10); color: var(--blue); }
.pill-indigo{ background: var(--indigo); color: var(--white); }

.container {
  width: 100%;
  max-width: var(--max-w-content);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}