/* ============================================================
   Dakota Brand System — Web/Design CSS (reusable)
   ------------------------------------------------------------
   Source of truth: ~/code/dakota/brand/BRAND_RULES.md
   Standing rule: monochromatic for digital. No blue accents.

   This file is the canonical design system for any Dakota
   web/digital project. Reference it from project HTML via a
   relative path to ~/code/dakota/brand/web/styles/brand.css.

   Path conventions assume an HTTP server rooted at
   ~/code/dakota/ — see ~/code/dakota/brand/web/README.md.
   ============================================================ */

/* --- Fonts ----------------------------------------------- */

@font-face {
    font-family: 'Ivar Soft';
    src: url('../assets/fonts/IvarSoft-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Ivar Soft';
    src: url('../assets/fonts/IvarSoft-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Ivar Soft';
    src: url('../assets/fonts/IvarSoft-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Ivar Soft';
    src: url('../assets/fonts/IvarSoft-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Maison Neue Mono';
    src: url('../assets/fonts/MaisonNeueMono-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* --- Design tokens --------------------------------------- */

:root {
    /* Monochromatic palette (BRAND_RULES.md > Color > Monochromatic) */
    --color-black:       #000000;  /* primary background, ink (Pantone Black 6 C) */
    --color-gray-dark:   #313131;  /* dark gray — surfaces, cards, borders (Pantone 446 C) */
    --color-gray-mid:    #939393;  /* mid gray — secondary text (Pantone 877 C) */
    --color-gray-light:  #C4C4C4;  /* light gray — muted text, dividers (Pantone 427 C) */
    --color-white:       #FFFFFF;  /* inverse text on dark, primary text */

    /* The one permitted accent (used sparingly, never decorative).
       See design-philosophy.md for usage rules. */
    --color-sand:        #BE7D4A;  /* saddle/tan — single emphasis moments only */

    /* Typography */
    --font-display: 'Ivar Soft', 'DM Serif Display', Georgia, serif;
    --font-mono:    'Maison Neue Mono', 'Space Mono', 'SFMono-Regular', Menlo, monospace;

    /* Slide dimensions (16:9 canvas) */
    --slide-w: 1920px;
    --slide-h: 1080px;

    /* Spacing scale */
    --s-1: 8px;
    --s-2: 16px;
    --s-3: 24px;
    --s-4: 32px;
    --s-5: 48px;
    --s-6: 64px;
    --s-7: 96px;
    --s-8: 128px;
    --s-9: 192px;
}

/* --- Reset ------------------------------------------------ */

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

html, body {
    height: 100%;
    background: var(--color-black);
    /* Anti-aliasing — crisper type on macOS/iOS browsers */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg {
    display: block;
}

/* --- Typography utilities (BRAND_RULES.md > Typography) -- */

/* Display: Ivar Soft Regular — headings, big numbers */
.display {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.display-xl { font-size: 144px; line-height: 1.05; }  /* hero numbers */
.display-l  { font-size: 96px;  line-height: 1.1; }   /* slide headlines */
.display-m  { font-size: 72px;  line-height: 1.15; }  /* sub-headlines */
.display-s  { font-size: 48px;  line-height: 1.2; }
.display-xs { font-size: 36px;  line-height: 1.25; }

/* Mono: Maison Neue Mono Regular — body, UI, labels */
.mono {
    font-family: var(--font-mono);
    font-weight: 400;
    line-height: 1.5;
}

.mono-l  { font-size: 28px; line-height: 1.5; }
.mono-m  { font-size: 22px; line-height: 1.55; }
.mono-s  { font-size: 18px; line-height: 1.5; }
.mono-xs { font-size: 14px; line-height: 1.5; }

.caps {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.caps-tight { letter-spacing: 0.05em; }
.caps-loose { letter-spacing: 0.16em; }

/* --- Brand layout primitives ----------------------------- */

.rule {
    border: none;
    border-top: 1px solid currentColor;
    opacity: 0.4;
}