/* ============================================================
   PLANARK — theme.css
   Design tokens, base styles, and core UI components.

   Load this BEFORE any other stylesheet and AFTER Google Fonts.
   All component CSS in this project should consume the variables
   declared in :root — never hard-code colour or sizing values.

   Sections
   ────────
   1.  CSS Custom Properties (design tokens)
   2.  Reset & base
   3.  Typography
   4.  Utility classes
   5.  ButtonPill component
   6.  ActionTile component
   7.  Glass utility
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */

:root {

  /* ── Colour: Primary ──────────────────────────────────────── */
  --navy:         rgba(25,  31,  97,  1);   /* #191F61 — primary brand   */
  --navy-d:       rgba(42,  52,  162, 1);   /* #2A34A2 — logo / active   */
  --navy-l:       rgba(223, 225, 247, 1);   /* #DFE1F7 — tint / hover bg */
  --navy-ll:      rgba(240, 241, 252, 1);   /* #F0F1FC — lightest tint   */

  --green:        rgba(25,  97,  62,  1);   /* #19613E — CTA / action    */
  --green-lift:   rgba(60,  205, 135, 1);   /* #3CCD87 — hover on green  */
  --green-l:      rgba(231, 249, 240, 1);   /* #E7F9F0 — success tint    */

  /* ── Colour: Neutrals ────────────────────────────────────── */
  --cream:        rgba(245, 243, 236, 1);   /* #F5F3EC — page background */
  --cream2:       rgba(227, 221, 202, 1);   /* #E3DDCA — borders/dividers*/
  --cream3:       rgba(250, 249, 245, 1);   /* #FAF9F5 — elevated surface*/

  --ink:          rgba(25,  25,  25,  1);   /* #191919 — primary text    */
  --ink2:         rgba(61,  61,  61,  1);   /* #3D3D3D — secondary text  */
  --muted:        rgba(102, 102, 102, 1);   /* #666666 — helper/label    */
  --muted-l:      rgba(163, 163, 163, 1);   /* #A3A3A3 — placeholder     */

  /* ── Colour: Accents (use sparingly) ─────────────────────── */
  --orange:       rgba(118, 50,  4,   1);   /* #763204 — alert / warm    */
  --cafe:         rgba(128, 102, 60,  1);   /* #80663C — earth tone      */
  --purple:       rgba(125, 107, 242, 1);   /* #7D6BF2 — feature accent  */

  /* ── Colour: Surface & chrome ────────────────────────────── */
  --rule:         rgba(25,  25,  25,  0.09);/* divider lines             */
  --overlay:      rgba(25,  31,  97,  0.48);/* modal scrim               */
  --glass-fill:   rgba(255, 255, 255, 0.12);/* glass surface fill        */
  --glass-border: rgba(255, 255, 255, 0.35);/* glass border / specular   */

  /* ── Typography ──────────────────────────────────────────── */
  --serif:    'Bricolage Grotesque', system-ui, sans-serif;
  --sans:     'Libre Franklin', Georgia, serif;
  /* --display (Cormorant Garamond) is legacy — do not use in new code */

  /* ── Type scale ──────────────────────────────────────────── */
  --text-display: 3.5rem;   /* 52px  — hero / landing headline          */
  --text-h1:      2.5rem;   /* 37px  — page title                       */
  --text-h2:      2rem;     /* 30px  — section header                   */
  --text-h3:      1.5rem;   /* 22px  — card / feature title             */
  --text-lg:      1.2rem;   /* 18px  — lead paragraph                   */
  --text-base:    1rem;     /* 15px  — body copy (root font-size)        */
  --text-sm:      0.867rem; /* 13px  — caption / meta                   */
  --text-xs:      0.733rem; /* 11px  — badge / tag / legal              */

  /* ── Spacing scale (multiples of 4px) ───────────────────── */
  --space-1:  0.267rem;  /*  4px */
  --space-2:  0.533rem;  /*  8px */
  --space-3:  1rem;      /* 16px — default gap inside components */
  --space-4:  1.6rem;    /* 24px — between components            */
  --space-5:  2.667rem;  /* 40px — section inner padding         */
  --space-6:  4.267rem;  /* 64px — between major sections        */
  --space-7:  6.4rem;    /* 96px — hero vertical padding         */

  /* ── Border radius ───────────────────────────────────────── */
  --radius-pill:   9999px;  /* full pill — buttons, chips            */
  --radius-xl:     20px;    /* large card / ActionTile               */
  --radius-lg:     16px;    /* standard card / modal                 */
  --radius-md:     12px;    /* button (non-pill), input              */
  --radius-sm:      8px;    /* inner element, thumbnail              */
  --radius-xs:      6px;    /* badge / tag                           */

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 2px 12px rgba(25,31,97,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 32px rgba(25,31,97,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-glass: 0 4px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  350ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --container:      1200px;
  --container-pad:  3rem;
}

@media (max-width: 768px) {
  :root { --container-pad: 1.5rem; }
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  background: var(--cream3);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

.content-container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

/* Display — Bricolage Grotesque Bold, hero sections */
.t-display {
  font-family: var(--serif);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* H1–H3 */
h1, .t-h1 {
  font-family: var(--serif);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
h2, .t-h2 {
  font-family: var(--serif);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h3, .t-h3 {
  font-family: var(--serif);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.3;
}

/* Body */
.t-lg   { font-size: var(--text-lg);   line-height: 1.65; }
.t-base { font-size: var(--text-base); line-height: 1.65; }
.t-sm   { font-size: var(--text-sm);   line-height: 1.5;  }
.t-xs   { font-size: var(--text-xs);   line-height: 1.4;  }

/* Semantic emphasis */
em { font-style: italic; }
strong { font-weight: 600; }

/* Section eyebrow label */
.label {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ============================================================
   4. UTILITY CLASSES
   ============================================================ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ============================================================
   5. BUTTONPILL COMPONENT
   ────────────────────────────────────────────────────────────
   Variants  : primary | glass | ghost
   Sizes     : lg (default) | md
   States    : default | hover | active | disabled | loading
   With icon : add .btn--icon and place an <svg> or <img>
               inside the button alongside the label span.

   HTML structure
   ──────────────
   <button class="btn btn--primary btn--lg">
     <span class="btn__label">Get started</span>
   </button>

   <button class="btn btn--glass btn--lg btn--icon">
     <svg class="btn__icon" …/>
     <span class="btn__label">Explore</span>
   </button>

   <button class="btn btn--ghost btn--md" disabled>
     <span class="btn__label">Learn more</span>
   </button>

   <button class="btn btn--primary btn--lg btn--loading" aria-busy="true">
     <span class="btn__spinner" aria-hidden="true"></span>
     <span class="btn__label">Loading…</span>
   </button>
   ============================================================ */

/* ── Base ────────────────────────────────────────────────── */
.btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  /* Shape */
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;

  /* Typography */
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;

  /* Behaviour */
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;

  /* Transitions */
  transition:
    background  var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow  var(--dur-base) var(--ease-out),
    transform   var(--dur-fast) var(--ease-out),
    opacity     var(--dur-base) var(--ease-out);
}

.btn:focus-visible {
  outline: 2px solid var(--navy-d);
  outline-offset: 3px;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* ── Sizes ───────────────────────────────────────────────── */

/* Large (default) */
.btn--lg {
  padding: 15px 28px;
  font-size: 0.967rem;   /* 14.5px */
  min-height: 52px;
}

/* Medium */
.btn--md {
  padding: 11px 22px;
  font-size: 0.867rem;   /* 13px */
  min-height: 42px;
}

/* Icon adjustments */
.btn--icon.btn--lg { gap: 10px; }
.btn--icon.btn--md { gap: 8px;  }

.btn__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.btn--md .btn__icon {
  width: 16px;
  height: 16px;
}

/* ── Variant: Primary ────────────────────────────────────── */
/*
   Solid forest green. Used for the main CTA on dark/feature
   panels (hero with dark bg, glass card contexts).
   On light cream backgrounds, prefer --navy variant below.
*/
.btn--primary {
  background: var(--green);
  color: #fdfcfa;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(25, 97, 62, 0.3);
}
.btn--primary:hover:not(:disabled) {
  background: var(--green-lift);
  box-shadow: 0 4px 16px rgba(25, 97, 62, 0.35);
}
.btn--primary:active:not(:disabled) {
  background: var(--green);
  box-shadow: none;
}

/* Navy primary (light backgrounds) */
.btn--primary-navy {
  background: var(--navy);
  color: #fdfcfa;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(25, 31, 97, 0.25);
}
.btn--primary-navy:hover:not(:disabled) {
  background: var(--navy-d);
  box-shadow: 0 4px 16px rgba(25, 31, 97, 0.3);
}

/* ── Variant: Glass (iOS 26) ─────────────────────────────── */
/*
   Frosted glass pill. Use ONLY on dark or gradient backgrounds
   (hero panels, feature cards, photo overlays). On cream/white
   the effect is invisible — use --ghost instead.

   The glass effect requires backdrop-filter support. The
   fallback (for older browsers) is a semi-transparent fill.
*/
.btn--glass {
  background: var(--glass-fill);
  color: #ffffff;
  border-color: var(--glass-border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-glass);
}
.btn--glass:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn--glass:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

/* Tinted glass variants — still on dark backgrounds only */
.btn--glass-green {
  background: rgba(60, 205, 135, 0.18);
  border-color: rgba(60, 205, 135, 0.45);
}
.btn--glass-green:hover:not(:disabled) {
  background: rgba(60, 205, 135, 0.28);
}

.btn--glass-navy {
  background: rgba(25, 31, 97, 0.35);
  border-color: rgba(100, 120, 220, 0.45);
}
.btn--glass-navy:hover:not(:disabled) {
  background: rgba(25, 31, 97, 0.50);
}

/* ── Variant: Ghost ──────────────────────────────────────── */
/*
   Transparent with a border. Works on both light and dark
   backgrounds — adjust --ghost-color via a parent class if
   needed (e.g. .dark-section .btn--ghost { --ghost-color: white }).
*/
.btn--ghost {
  --ghost-color: var(--navy);
  background: transparent;
  color: var(--ghost-color);
  border-color: currentColor;
  opacity: 0.85;
}
.btn--ghost:hover:not(:disabled) {
  background: var(--navy-ll);
  opacity: 1;
}

/* Ghost on dark panels */
.btn--ghost-light {
  --ghost-color: rgba(255, 255, 255, 0.9);
  background: transparent;
  color: var(--ghost-color);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ghost-light:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

/* ── State: Disabled ─────────────────────────────────────── */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── State: Loading ──────────────────────────────────────── */
.btn--loading {
  cursor: wait;
  pointer-events: none;
}
.btn--loading .btn__label {
  opacity: 0.6;
}

.btn__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  animation: btn-spin 0.65s linear infinite;
  flex-shrink: 0;
}
.btn--md .btn__spinner { width: 14px; height: 14px; }

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ── Mobile minimum touch target ─────────────────────────── */
@media (max-width: 768px) {
  .btn--lg { min-height: 52px; padding: 14px 24px; }
  .btn--md { min-height: 48px; padding: 12px 20px; }
}


/* ============================================================
   6. ACTIONTILE COMPONENT
   ────────────────────────────────────────────────────────────
   Square quick-action tile (104×96px). Sits in horizontal
   scroll rows inside hero / feature panels.

   Variants  : glass | solid
   States    : default | hover | pressed | disabled

   HTML structure
   ──────────────
   <button class="action-tile action-tile--glass">
     <div class="action-tile__icon">
       <svg …/>               <!-- or an emoji / img -->
     </div>
     <span class="action-tile__label">Search</span>
   </button>

   Row of tiles:
   <div class="action-tile-row">
     <button class="action-tile action-tile--glass">…</button>
     <button class="action-tile action-tile--glass">…</button>
     <button class="action-tile action-tile--solid">…</button>
   </div>
   ============================================================ */

/* ── Base ────────────────────────────────────────────────── */
.action-tile {
  /* Fixed dimensions from design spec */
  width:  104px;
  height:  96px;
  flex-shrink: 0;

  /* Layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 14px 12px;

  /* Shape */
  border-radius: var(--radius-xl);   /* 20px */
  border: 1px solid transparent;

  /* Typography */
  font-family: var(--sans);
  font-size: var(--text-xs);         /* 11px */
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  text-decoration: none;

  /* Behaviour */
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;

  transition:
    background  var(--dur-base) var(--ease-out),
    transform   var(--dur-fast) var(--ease-out),
    box-shadow  var(--dur-base) var(--ease-out);
}

.action-tile:focus-visible {
  outline: 2px solid var(--navy-d);
  outline-offset: 3px;
}
.action-tile:active:not(:disabled) {
  transform: scale(0.95);
}

/* Icon container */
.action-tile__icon {
  width:  32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.action-tile__label {
  color: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  margin-top: auto;
  padding-top: 4px;
}

/* ── Variant: Glass ──────────────────────────────────────── */
/*
   Use on dark/gradient backgrounds only.
*/
.action-tile--glass {
  background: var(--glass-fill);
  color: #ffffff;
  border-color: var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.action-tile--glass .action-tile__icon {
  background: rgba(255, 255, 255, 0.2);
}
.action-tile--glass:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.action-tile--glass:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
  transform: scale(0.95);
}

/* ── Variant: Solid ──────────────────────────────────────── */
/*
   Forest green solid tile. Use for the primary/featured action
   in a row of glass tiles.
*/
.action-tile--solid {
  background: var(--green);
  color: #fdfcfa;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(25, 97, 62, 0.35);
}
.action-tile--solid .action-tile__icon {
  background: rgba(255, 255, 255, 0.25);
}
.action-tile--solid:hover:not(:disabled) {
  background: var(--green-lift);
  box-shadow: 0 4px 16px rgba(25, 97, 62, 0.45);
}
.action-tile--solid:active:not(:disabled) {
  background: var(--green);
  transform: scale(0.95);
}

/* ── State: Disabled ─────────────────────────────────────── */
.action-tile:disabled,
.action-tile[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Row layout ──────────────────────────────────────────── */
.action-tile-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  /* Hide scrollbar on mobile but keep scrollable */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.action-tile-row::-webkit-scrollbar { display: none; }


/* ============================================================
   7. GLASS UTILITY CLASS
   ────────────────────────────────────────────────────────────
   Generic frosted-glass surface for cards, panels, overlays.
   Apply .glass to any container that sits on a dark/gradient bg.

   Do NOT use .glass on cream/white backgrounds — it's invisible.
   ============================================================ */

.glass {
  background: var(--glass-fill);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}

/* Thickness tiers — match Figma component tiers */
.glass--thin   { backdrop-filter: blur( 8px); -webkit-backdrop-filter: blur( 8px); }
.glass--regular{ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.glass--thick  { backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); }
.glass--ultra  { backdrop-filter: blur(48px); -webkit-backdrop-filter: blur(48px); }

/* Tinted variants */
.glass--green  { background: rgba( 60, 205, 135, 0.18); border-color: rgba( 60, 205, 135, 0.45); }
.glass--blue   { background: rgba( 64, 140, 255, 0.18); border-color: rgba( 64, 140, 255, 0.45); }
.glass--amber  { background: rgba(255, 184,  46, 0.18); border-color: rgba(255, 184,  46, 0.45); }
.glass--red    { background: rgba(255,  77,  77, 0.18); border-color: rgba(255,  77,  77, 0.45); }