/* Carmoola Design System — Colors & Typography */

/* ============================================================
   FONTS
   ============================================================ */
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-Book.ttf") format("truetype"); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-BookItalic.ttf") format("truetype"); font-weight: 350; font-style: italic; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-RegularItalic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-Semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-SemiboldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-Extrabold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-ExtraboldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-Heavy.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Cosmica"; src: url("fonts/Cosmica-HeavyItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

/* DM Sans (secondary / fallback) loaded from Google Fonts in HTML */

:root {
  /* ============================================================
     PRIMARY COLOURS
     ============================================================ */
  --carmoola-fuchsia:    #F90081;  /* key brand indicator */
  --carmoola-fuchsia-dk: #BC0E63;  /* hover / pressed */
  --carmoola-fuchsia-xd: #CE086E;
  --carmoola-fuchsia-pink-bg: #FFECF6; /* pale pink tint background */
  --carmoola-black-trim: #111111;  /* headlines + contrast */
  --carmoola-white:      #FFFFFF;

  /* ============================================================
     SECONDARY COLOURS
     ============================================================ */
  --carmoola-blue-sky:      #D5ECFE; /* lighter blue-sky tint (fills) */
  --carmoola-blue-sky-mid:  #BDE1FF;
  --carmoola-blue-sky-ink:  #2A9CFC;
  --carmoola-green-horizon: #B4E69E;
  --carmoola-green-horizon-tint: #E1F5D8;
  --carmoola-green-horizon-ink: #5FC03B;
  --carmoola-orange-haze:   #FFEBD4;
  --carmoola-orange-haze-mid:#F5C878;
  --carmoola-off-white:     #F7F7F3;
  --carmoola-graphite:      #444444;

  /* Extended neutrals (from in-app usage) */
  --carmoola-ink-900: #111111;
  --carmoola-ink-700: #222222;
  --carmoola-ink-600: #333333;
  --carmoola-ink-500: #444444;
  --carmoola-ink-400: #555555;
  --carmoola-ink-300: #777777;
  --carmoola-ink-200: #BFBFBF;
  --carmoola-ink-100: #D9D9D9;
  --carmoola-ink-050: #EBEBEB;
  --carmoola-ink-025: #F5F5F5;

  /* Semantic */
  --color-bg:           var(--carmoola-white);
  --color-bg-muted:     var(--carmoola-off-white);
  --color-bg-accent:    var(--carmoola-fuchsia-pink-bg);
  --color-fg:           var(--carmoola-ink-900);
  --color-fg-muted:     var(--carmoola-graphite);
  --color-fg-subtle:    var(--carmoola-ink-300);
  --color-accent:       var(--carmoola-fuchsia);
  --color-accent-fg:    var(--carmoola-white);
  --color-success:      var(--carmoola-green-horizon-ink);
  --color-success-bg:   var(--carmoola-green-horizon-tint);
  --color-info:         var(--carmoola-blue-sky-ink);
  --color-info-bg:      var(--carmoola-blue-sky);
  --color-warn:         var(--carmoola-orange-haze-mid);
  --color-warn-bg:      var(--carmoola-orange-haze);
  --color-border:       var(--carmoola-ink-050);
  --color-border-strong:var(--carmoola-ink-100);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: "Cosmica", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Cosmica", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-fallback:"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --fw-light: 300;
  --fw-book:  350;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold:   700;
  --fw-extrabold: 800;
  --fw-heavy:  900;

  /* Marketing-scale (1920 artboard). Ratio: body=23, H1≈3x body=70, H2≈46 */
  --size-display-xl: 96px;
  --size-h1:         70px;
  --size-h2:         46px;
  --size-h3:         32px;
  --size-h4:         25px;
  --size-body-lg:    23px;
  --size-body:       18px;
  --size-body-sm:    16px;
  --size-caption:    14px;
  --size-micro:      11px;

  /* Line heights: body copy = 175% of font-size (per spec) */
  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-normal: 1.4;
  --lh-body:   1.75;

  /* ============================================================
     SPACING (multiples of 5 — "roundel-friendly")
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============================================================
     RADII — Roundels (multiples of 5)
     ============================================================ */
  --radius-xs: 5px;
  --radius-sm: 10px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --radius-xl: 25px;
  --radius-2xl: 30px;
  --radius-pill: 9999px;

  /* ============================================================
     ELEVATION
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(17,17,17,0.06), 0 1px 1px rgba(17,17,17,0.04);
  --shadow-md: 0 4px 13px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 13px rgba(0,0,0,0.25); /* spec shadow */
  --shadow-pink: 0 8px 24px rgba(249,0,129,0.18);

  /* ============================================================
     BORDERS
     ============================================================ */
  --border-thin:   1px solid var(--color-border);
  --border-med:    2px solid var(--color-border-strong);
  --border-accent: 4px solid var(--carmoola-fuchsia);

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.4,.1,.3,1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TEXT STYLES
   ============================================================ */
html { font-family: var(--font-body); color: var(--color-fg); -webkit-font-smoothing: antialiased; }

.h1, h1.carmoola { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--size-h1); line-height: var(--lh-tight); color: var(--color-fg); letter-spacing: -0.01em; }
.h2, h2.carmoola { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--size-h2); line-height: var(--lh-tight); color: var(--color-fg); }
.h3, h3.carmoola { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--size-h3); line-height: var(--lh-snug); color: var(--color-fg); }
.h4, h4.carmoola { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--size-h4); line-height: var(--lh-snug); color: var(--color-fg); }
.body-lg         { font-family: var(--font-body); font-weight: var(--fw-book);    font-size: var(--size-body-lg); line-height: var(--lh-body); color: var(--color-fg-muted); }
.body            { font-family: var(--font-body); font-weight: var(--fw-book);    font-size: var(--size-body);    line-height: var(--lh-body); color: var(--color-fg-muted); }
.body-sm         { font-family: var(--font-body); font-weight: var(--fw-book);    font-size: var(--size-body-sm); line-height: var(--lh-body); color: var(--color-fg-muted); }
.caption         { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--size-caption); line-height: 1.4; color: var(--color-fg-subtle); }
.micro           { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--size-micro);  line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-fg-subtle); }