/* ==========================================================================
   TyCat landing — design tokens
   Palette derived from the TyCat mascot (orange cat, cream fur, blue laptop).
   Structure & metrics inspired by kiro.dev.
   ========================================================================== */

/* ----- Self-hosted fonts (no external requests) --------------------------- */

/* Body — Inter */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Display — Space Grotesk (headings, buttons) */
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Mono — Space Mono (mockup labels, badges, code) */
@font-face {
  font-family: "Space Mono";
  src: url("../assets/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../assets/fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ----- Tokens -------------------------------------------------------------- */

:root {
  /* ----- Palette (dark, warm; muted clay accent) ------------------------- */
  --color-bg-page:        #171310; /* warm near-black */
  --color-bg-section:     #1E1815;
  --color-bg-card:        #26201B; /* cards */
  --color-bg-elevated:    #302822;
  --color-text-primary:   #F7EFE8; /* ~15:1 on bg */
  --color-text-muted:     #B7A99C; /* ~7.5:1 */
  --color-text-inverted:  #1A1512; /* dark text used on accent / light surfaces */

  --color-accent:         #FF6A3D; /* cat orange — PRIMARY; dark text on it = 5.4:1 */
  --color-accent-hover:   #F0561F;
  --color-accent-active:  #D8481A;
  --color-accent-subtle:  #3A241C; /* chip / badge background */
  --color-accent-2:       #38B6E6; /* laptop-screen blue — links / icons */
  --color-accent-2-hover: #18A8D8;
  --color-highlight:      #F5D98F; /* cream fur — highlights / decor */
  --color-border:         #33291F;
  --color-border-strong:  #4A3B2C;
  --color-success:        #5CC08A;

  /* ----- Terracotta canvas (kiro's "purple canvas" role, in our brand) --- */
  --canvas-bg:          #FF6A3D;                /* flat cat-orange plane, kiro-style */
  --canvas-text:        #2A1208;                /* dark text on canvas (6.2:1 on flat bg) */
  --canvas-text-muted:  rgba(36, 14, 6, 0.9);   /* secondary text on canvas (5.6:1) */

  /* ----- Theme-role tokens (dark values = the exact literals they replaced;
         the light theme overrides them in :root[data-theme="light"]) ------- */
  --color-on-accent:      #1A1512;              /* text on accent fills (buttons, bubbles, send) */
  --btn-inverse-text:     #1A1512;              /* text on the white canvas button */
  --btn-inverse-fill:     #F5D98F;              /* its hover fill */
  --cta-copy-hover-text:  #F5D98F;              /* "Copy" hover text on canvas-text bg */
  --chip-key-color:       var(--color-text-muted); /* hotkey chips (⌃⇧1) */
  --chip-key-bg:          var(--color-bg-page);
  --canvas-highlight:     #F5D98F;              /* cream accents sitting on the canvas */
  --canvas-slot-bg:       rgba(23, 19, 16, 0.45);   /* video slot plate on canvas */
  --canvas-slot-outline:  rgba(255, 255, 255, 0.16);
  --canvas-slot-mark-bg:  rgba(23, 19, 16, 0.55);
  --canvas-slot-badge-border: rgba(255, 255, 255, 0.35);
  --nav-scrolled-bg:        rgba(23, 19, 16, 0.6);  /* pill glass when scrolled */
  --nav-scrolled-bg-strong: rgba(23, 19, 16, 0.85); /* no-blur fallback */
  --nav-scrim:            rgba(23, 19, 16, 0.5);    /* behind the mobile menu */
  --shadow-menu:          0 16px 44px -18px rgba(0, 0, 0, 0.7);
  --shadow-window:        0 30px 60px -30px rgba(0, 0, 0, 0.55);

  /* ----- Font stacks ----------------------------------------------------- */
  --font-body:    "Inter", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Avenir Next", "Inter", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Type scale — fluid clamp, min @375px -> max @1280px ------------- */
  --step-h1:      clamp(2.75rem, 2.336rem + 1.77vw, 3.75rem);      /* 44 -> 60 */
  --step-h2:      clamp(1.6875rem, 1.532rem + 0.66vw, 2.0625rem);  /* 27 -> 33 */
  --step-h3:      clamp(1.375rem, 1.297rem + 0.33vw, 1.5625rem);   /* 22 -> 25 */
  --step-h4:      clamp(1.1875rem, 1.162rem + 0.11vw, 1.25rem);    /* 19 -> 20 */
  --step-lead:    1.25rem;    /* 20px lead / subtitle */
  --step-body:    1rem;       /* 16px / 145% */
  --step-sub:     0.875rem;   /* 14px — dense UI / mockup text */
  --step-small:   0.8125rem;  /* 13px / 140% — captions, chips, meta */
  --step-mono:    0.75rem;    /* 12px — mono micro labels / badges */

  /* ----- Radii ----------------------------------------------------------- */
  --radius-canvas:  32px;    /* big cards / panels / canvases */
  --radius-card:    32px;
  --radius-btn:     16px;    /* buttons */
  --radius-pill:    16px;    /* nav pills */
  --radius-tile:    12px;    /* small tiles */
  --radius-tile-sm: 12px;
  --radius-round:   9999px;  /* avatars / dots */

  /* ----- Layout ---------------------------------------------------------- */
  --max-content: 1280px;
  --max-text:    896px;
  --max-lead:    720px;  /* lead paragraphs: ~70ch at 20px (kiro leads are 600px) */
  --max-canvas:  1600px;
  --space-page:  24px;

  /* ----- Rhythm & spacing ------------------------------------------------ */
  --space-card:  24px;
  --gap-inner:   24px;

  /* ----- Motion ---------------------------------------------------------- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    160ms;
  --dur:         260ms;
  --dur-slow:    480ms;
}

/* ==========================================================================
   LIGHT THEME — palette from the beta paw icon (logo-beta-128.png):
   peach/white paw fill (#FEFEFE + #FB9E49), dark brown outline (#682A12),
   pink pads (#FCB1A5) and the bright-blue "beta" plaque (#38BDF8).
   Dark stays the default; this block only overrides colors.
   ========================================================================== */
:root[data-theme="light"] {
  --color-bg-page:        #FAF1E8; /* warm peach off-white (paw fill glow) */
  --color-bg-section:     #F4E7D9;
  --color-bg-card:        #FFFFFF; /* cards whiter than the page */
  --color-bg-elevated:    #F6EADD;
  --color-text-primary:   #4A2313; /* deepened paw outline — 12.2:1 on page */
  --color-text-muted:     #8A5230; /* 5.7:1 on page */
  --color-text-inverted:  #FFF8F1; /* light text on dark fills */

  --color-accent:         #B24505; /* paw orange #FB9E49 darkened — 5:1 as text */
  --color-accent-hover:   #A03D04;
  --color-accent-active:  #8C3503;
  --color-accent-subtle:  #FBE3D8; /* pink pads (#FCB1A5) as chip/badge bg */
  --color-accent-2:       #0B7DC0; /* beta-plaque blue for icons/focus */
  --color-accent-2-hover: #075985;
  --color-highlight:      #075985; /* highlight role -> beta-blue ink, 6.8:1 on page */
  --color-border:         #EDDCCB;
  --color-border-strong:  #D9BD9F;
  --color-success:        #176B41;

  /* Canvas: soft pink from the paw pads (#FCB1A5) — flat, tcard--out family */
  --canvas-bg:          #FAD2C2;              /* flat pad-pink plane */
  --canvas-text:        #47130A;              /* rosy brown, 11:1 on flat bg */
  --canvas-text-muted:  rgba(71, 19, 10, 0.9); /* 8.8:1 on flat bg */

  /* Role tokens */
  --color-on-accent:      #FFF8F1;            /* 5.3:1 on --color-accent */
  --btn-inverse-text:     #4A2313;
  --btn-inverse-fill:     #CDEBFB;            /* beta-blue hover wash */
  --cta-copy-hover-text:  #FFEDE6;            /* pink cream on --canvas-text fill, 13.6:1 */
  --chip-key-color:       #075985;            /* hotkey chips go beta-blue */
  --chip-key-bg:          #DCEFFC;
  --canvas-highlight:     #075985;            /* blue ink, 5.8:1 on the pink slot plate */
  --canvas-slot-bg:       rgba(255, 249, 246, 0.62);
  --canvas-slot-outline:  rgba(118, 39, 28, 0.22);
  --canvas-slot-mark-bg:  rgba(255, 255, 255, 0.72);
  --canvas-slot-badge-border: rgba(7, 89, 133, 0.45);
  --nav-scrolled-bg:        rgba(250, 241, 232, 0.7);
  --nav-scrolled-bg-strong: rgba(250, 241, 232, 0.92);
  --nav-scrim:            rgba(74, 35, 19, 0.4);
  --shadow-menu:          0 16px 44px -18px rgba(94, 44, 18, 0.35);
  --shadow-window:        0 30px 60px -30px rgba(94, 44, 18, 0.3), 0 0 0 1px rgba(104, 42, 18, 0.08);
}