/* ============================================================
   OOROBOROS DESIGN SYSTEM — Core Tokens
   Derived from the Canvas Social Creative Identity Deck.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Zoho Puvi — system sans (replaces Raleway). Self-hosted from /fonts. */
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-Thin.ttf") format("truetype");        font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-ExtraLight.ttf") format("truetype");  font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-Light.ttf") format("truetype");       font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-Regular.ttf") format("truetype");     font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-Italic.ttf") format("truetype");      font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-Medium.ttf") format("truetype");      font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-SemiBold.ttf") format("truetype");    font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-Bold.ttf") format("truetype");        font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-ExtraBold.ttf") format("truetype");   font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-Black.ttf") format("truetype");       font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Zoho Puvi"; src: url("../fonts/ZohoPuvi-ExtraBlack.ttf") format("truetype");  font-weight: 950; font-style: normal; font-display: swap; }

:root {
  /* ====== Color — Brand palette (named) ====== */
  --oo-ink:           #202020;   /* Supporting Neutral — dark base */
  --oo-canvas-cloud:  #EDF1F5;   /* Secondary / light surface */
  --oo-electric:      #27AAE1;   /* Primary accent — Electric Blue */
  --oo-hard-disk:     #D9D9D9;   /* Accent neutral */

  /* Extended brand blues (from moodboard / blueprint motif) */
  --oo-blueprint:     #1A3FD6;   /* deep blueprint blue */
  --oo-blueprint-deep:#0B1F66;
  --oo-electric-soft: #BEE5F6;   /* tinted electric for surfaces */
  --oo-electric-deep: #1486B6;   /* hover / pressed electric */

  /* ====== Neutrals — grayscale ramp ====== */
  --oo-n-0:   #FFFFFF;
  --oo-n-50:  #F7F9FB;
  --oo-n-100: #EDF1F5;   /* = canvas-cloud */
  --oo-n-200: #DDE2E8;
  --oo-n-300: #D9D9D9;   /* = hard-disk */
  --oo-n-400: #B4B7BC;
  --oo-n-500: #8A8D92;
  --oo-n-600: #5A5C60;
  --oo-n-700: #3A3B3E;
  --oo-n-800: #2A2A2C;
  --oo-n-900: #202020;   /* = ink */
  --oo-n-1000:#0E0E10;

  /* ====== Semantic — Light surface ====== */
  --fg-1: var(--oo-ink);          /* primary text */
  --fg-2: var(--oo-n-700);        /* secondary text */
  --fg-3: var(--oo-n-500);        /* muted */
  --bg-1: var(--oo-canvas-cloud); /* primary surface */
  --bg-2: var(--oo-n-0);          /* raised surface */
  --bg-3: var(--oo-n-200);        /* recessed / chip */
  --border-1: var(--oo-n-300);
  --border-2: var(--oo-n-200);
  --accent: var(--oo-electric);
  --accent-fg: #FFFFFF;

  /* ====== Semantic — Dark surface (Ink) ====== */
  --on-dark-fg-1: #FFFFFF;
  --on-dark-fg-2: rgba(255,255,255,0.78);
  --on-dark-fg-3: rgba(255,255,255,0.55);
  --on-dark-bg-1: var(--oo-ink);
  --on-dark-bg-2: #2A2A2C;
  --on-dark-bg-3: #1A1A1C;
  --on-dark-border: rgba(255,255,255,0.12);

  /* ====== Type families ====== */
  --font-sans:    "Zoho Puvi", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-script:  "Caveat", "Bradley Hand", cursive;    /* taglines / pull-quotes */
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ====== Type scale (web / product) ====== */
  --type-display:  72px;   /* hero */
  --type-h1:       56px;
  --type-h2:       40px;
  --type-h3:       28px;
  --type-h4:       22px;
  --type-body-lg:  19px;
  --type-body:     17px;
  --type-body-sm:  15px;
  --type-caption:  13px;
  --type-eyebrow:  12px;

  /* Slide scale (1920x1080) — also exported as deck tokens */
  --type-slide-display:  140px;
  --type-slide-title:    96px;
  --type-slide-subtitle: 44px;
  --type-slide-body:     34px;
  --type-slide-small:    26px;

  /* ====== Type weights ====== */
  --w-thin: 200;       /* @kind font */
  --w-light: 300;      /* @kind font */
  --w-regular: 400;    /* @kind font */
  --w-medium: 500;     /* @kind font */
  --w-semibold: 600;   /* @kind font */
  --w-bold: 700;       /* @kind font */
  --w-extrabold: 800;  /* @kind font */

  /* ====== Line height ====== */
  --lh-tight: 1.05;    /* @kind font */
  --lh-snug: 1.2;      /* @kind font */
  --lh-normal: 1.45;   /* @kind font */
  --lh-loose: 1.7;     /* @kind font */

  /* ====== Letter spacing ====== */
  --ls-tight: -0.02em; /* @kind font */
  --ls-normal: 0;      /* @kind font */
  --ls-wide: 0.04em;   /* @kind font */
  --ls-wider: 0.12em;  /* @kind font */ /* eyebrow / category tags */

  /* ====== Spacing (4pt base) ====== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ====== Radii ====== */
  --r-0: 0;            /* @kind radius */ /* default — grid-aligned squareness */
  --r-1: 4px;          /* inputs, chips */
  --r-2: 8px;          /* cards */
  --r-3: 12px;         /* surfaces, glass */
  --r-4: 20px;         /* large containers */
  --r-pill: 999px;

  /* ====== Border widths ====== */
  --bw-hair: 0.5px;
  --bw-1: 1px;
  --bw-2: 2px;

  /* ====== Shadows / elevation ====== */
  --shadow-1: 0 1px 2px rgba(32,32,32,0.06), 0 1px 1px rgba(32,32,32,0.04);
  --shadow-2: 0 4px 12px rgba(32,32,32,0.08), 0 2px 4px rgba(32,32,32,0.04);
  --shadow-3: 0 12px 32px rgba(32,32,32,0.12), 0 4px 8px rgba(32,32,32,0.06);
  --shadow-4: 0 24px 64px rgba(32,32,32,0.18), 0 8px 16px rgba(32,32,32,0.08);
  --shadow-electric: 0 8px 32px rgba(39,170,225,0.32);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.18);

  /* ====== Motion ====== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur-base: 220ms;   /* @kind other */
  --dur-slow: 420ms;   /* @kind other */

  /* ====== Grid ====== */
  --grid-unit: 8px;    /* @kind spacing */
  --grid-cols: 12;     /* @kind other */
  --grid-gutter: 24px; /* @kind spacing */
  --grid-max: 1280px;  /* @kind other */
}

/* ============================================================
   Semantic element styles — keep these portable
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  font-weight: var(--w-regular);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
}

h1 { font-size: var(--type-h1); font-weight: var(--w-light); }
h2 { font-size: var(--type-h2); font-weight: var(--w-light); }
h3 { font-size: var(--type-h3); font-weight: var(--w-semibold); }
h4 { font-size: var(--type-h4); font-weight: var(--w-semibold); }

.oo-display {
  font-size: var(--type-display);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.oo-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
}

.oo-script {
  font-family: var(--font-script);
  font-weight: var(--w-regular);
  letter-spacing: 0;
}

.oo-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

p { margin: 0; line-height: var(--lh-normal); }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
a:hover { border-bottom-color: var(--accent); }