/*
 * ClewAI Design System — Colors & Typography
 * ==========================================
 * Source: ClewAI Brand Guide (Figma) + github.com/ClewAI/brand
 *
 * Usage: import this file into any HTML or CSS project.
 * Font note: SN Pro is a custom typeface. Google Fonts substitute
 * (DM Serif Display) is used here. Replace with actual SN Pro
 * @font-face declarations when font files are available.
 */

/* ─────────────────────────────────────────
   Fonts
   ───────────────────────────────────────── */

/* SN Pro — brand display typeface (variable font) */
@font-face {
  font-family: 'SN Pro';
  src: url('fonts/SNPro-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('fonts/RobotoMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ─────────────────────────────────────────
     BRAND COLOR PALETTE
     ───────────────────────────────────────── */

  /* ─────────────────────────────────────────
     Brand palette (2026 identity)
     Source: ClewAI styleguide draft
     ───────────────────────────────────────── */
  --brand-cream:      #FFFAF1;  /* page background */
  --brand-cream-deep: #FCF3E4;  /* second surface tone */
  --brand-navy:       #03071E;  /* deep ink */
  --brand-wine:       #370617;
  --brand-maroon:     #6A040F;
  --brand-red-deep:   #9D0208;
  --brand-red:        #D00000;  /* secondary action */
  --brand-red-orange: #DC2F02;
  --brand-orange:     #E85D04;
  --brand-amber:      #F48C06;  /* primary action */
  --brand-yellow:     #FAA307;
  --brand-gold:       #FFBA08;

  /* Legacy semantic tokens — rebound to the new palette
     so every page that uses them flips identity at once. */
  --color-bone:       var(--brand-cream);
  --color-ink:        #111111;
  --color-tomato:     var(--brand-amber);  /* primary CTA fills */
  --color-cobalt:     var(--brand-red);    /* secondary CTA outline */
  --color-lemon:      var(--brand-gold);

  /* Extended / system */
  --color-white:      #FFFFFF;
  --color-gray-mid:   #7A7A7A;
  --color-gray-light: #D9D9D9;
  --color-bone-dark:  var(--brand-cream-deep);

  /* ─────────────────────────────────────────
     SEMANTIC COLORS
     ───────────────────────────────────────── */

  /* Backgrounds */
  --bg-page:          var(--color-bone);
  --bg-surface:       var(--color-white);
  --bg-surface-alt:   var(--color-bone);

  /* Foreground / text */
  --fg-primary:       var(--color-ink);
  --fg-secondary:     var(--color-gray-mid);
  --fg-disabled:      var(--color-gray-light);
  --fg-inverse:       var(--color-white);

  /* Actions */
  --color-action:       var(--brand-red);
  --color-action-hover: var(--brand-red-orange);
  --color-danger:       var(--brand-red);
  --color-warning:      var(--brand-amber);

  /* Borders */
  --border-color:     var(--color-gray-light);
  --border-color-subtle: rgba(17,17,17,0.08);

  /* ─────────────────────────────────────────
     TYPOGRAPHY — FONT FAMILIES
     Note: SN Pro → DM Serif Display substitute
     ───────────────────────────────────────── */

  --font-display:     'SN Pro', 'Georgia', serif;

  --font-mono:        'Roboto Mono', 'Menlo', 'Monaco', monospace;
  --font-micro:       'Geist', 'Geist Mono', var(--font-mono);

  /* ─────────────────────────────────────────
     TYPOGRAPHY — SCALE
     ───────────────────────────────────────── */

  /* Display — SN Pro / 32px / 600 */
  --text-display-size:    32px;
  --text-display-weight:  700;
  --text-display-lh:      1.0;
  --text-display-font:    var(--font-display);

  /* Header — SN Pro / 20px / 600 */
  --text-header-size:     20px;
  --text-header-weight:   600;
  --text-header-lh:       1.0;
  --text-header-font:     var(--font-display);

  /* Header small — Roboto Mono / 15px / 500 */
  --text-header-sm-size:    15px;
  --text-header-sm-weight:  500;
  --text-header-sm-lh:      1.4;
  --text-header-sm-font:    var(--font-mono);

  /* Body — Roboto Mono / 15px / 400 */
  --text-body-size:     15px;
  --text-body-weight:   400;
  --text-body-lh:       1.5;
  --text-body-font:     var(--font-mono);

  /* Caption — Roboto Mono / 12px / 400 */
  --text-caption-size:   12px;
  --text-caption-weight: 400;
  --text-caption-lh:     1.4;
  --text-caption-font:   var(--font-mono);

  /* Micro — Geist / 10px / 400 */
  --text-micro-size:    10px;
  --text-micro-weight:  400;
  --text-micro-lh:      1.3;
  --text-micro-font:    var(--font-micro);

  /* ─────────────────────────────────────────
     SPACING SCALE (8px base unit)
     ───────────────────────────────────────── */

  --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;

  /* ─────────────────────────────────────────
     BORDER RADIUS
     ───────────────────────────────────────── */

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-pill:  9999px;

  /* ─────────────────────────────────────────
     SHADOWS (minimal/flat brand)
     ───────────────────────────────────────── */

  --shadow-none:  none;
  --shadow-sm:    0 1px 3px rgba(17,17,17,0.08);
  --shadow-md:    0 2px 8px rgba(17,17,17,0.10);

  /* ─────────────────────────────────────────
     TRANSITIONS
     ───────────────────────────────────────── */

  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
}

/* ─────────────────────────────────────────
   SEMANTIC ELEMENT DEFAULTS
   Apply these as base styles for HTML elements
   ───────────────────────────────────────── */

body {
  font-family:      var(--font-mono);
  font-size:        var(--text-body-size);
  font-weight:      var(--text-body-weight);
  line-height:      var(--text-body-lh);
  color:            var(--fg-primary);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, .h1 {
  font-family:  var(--text-display-font);
  font-size:    var(--text-display-size);
  font-weight:  var(--text-display-weight);
  line-height:  var(--text-display-lh);
  color:        var(--fg-primary);
  margin:       0;
}

h2, .h2 {
  font-family:  var(--text-header-font);
  font-size:    var(--text-header-size);
  font-weight:  var(--text-header-weight);
  line-height:  var(--text-header-lh);
  color:        var(--fg-primary);
  margin:       0;
}

h3, .h3 {
  font-family:  var(--text-header-sm-font);
  font-size:    var(--text-header-sm-size);
  font-weight:  var(--text-header-sm-weight);
  line-height:  var(--text-header-sm-lh);
  color:        var(--fg-primary);
  margin:       0;
}

p, .body {
  font-family:  var(--text-body-font);
  font-size:    var(--text-body-size);
  font-weight:  var(--text-body-weight);
  line-height:  var(--text-body-lh);
  color:        var(--fg-primary);
  margin:       0;
}

small, .caption {
  font-family:  var(--text-caption-font);
  font-size:    var(--text-caption-size);
  font-weight:  var(--text-caption-weight);
  line-height:  var(--text-caption-lh);
  color:        var(--fg-secondary);
}

.micro {
  font-family:  var(--text-micro-font);
  font-size:    var(--text-micro-size);
  font-weight:  var(--text-micro-weight);
  line-height:  var(--text-micro-lh);
  color:        var(--fg-secondary);
}

a {
  color:              var(--color-action);
  text-decoration:    none;
  transition:         color var(--transition-fast);
}

a:hover {
  color: var(--color-action-hover);
}

code, pre {
  font-family: var(--font-mono);
  font-size:   var(--text-caption-size);
}