/* ============================================================
   KURA — Tokens
   kura-tokens.css — v1.0
   Loaded globally via layout.php. No component styles here.
   ============================================================ */

/* -- Google Fonts ------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&display=swap');

/* -- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* -- Color Tokens ------------------------------------------- */
:root {
    --bg:      #F6F4EF;       /* warm off-white — page base */
    --s1:      #EDEAE3;       /* input field fill */
    --s2:      #E5E1D8;       /* inactive states, past items */
    --ink:     #0F0F0E;       /* primary text — headings only */
    --ink2:    #58564F;       /* secondary text, button text, active labels */
    --ink3:    #A8A49A;       /* metadata, placeholders, inactive */
    --accent:  #E84010;       /* orange — badges, today state, CTAs, FAB dot */
    --div:     rgba(15,15,14,.08); /* dividers */

    /* Semantic surfaces */
    --surface:        #FFFFFF;
    --surface-raise:  #FFFFFF;
}

/* -- Typography Tokens -------------------------------------- */
:root {
    --font-display: 'League Gothic', 'Arial Narrow', sans-serif;
    --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;

    --t-hero:  clamp(32px, 10.5vw, 52px);  /* home hero phrase */
    --t-l2:    clamp(26px, 9vw,   38px);   /* page title */
    --t-nav:   17px;                        /* mode names in lists */
    --t-body:  11px;                        /* body text, inputs */
    --t-meta:  9px;                         /* dates, metadata */
    --t-label: 8px;                         /* field labels, section eyebrows */
}

/* -- Base Type ---------------------------------------------- */
html, body {
    font-family: var(--font-body);
    font-size:   var(--t-body);
    font-weight: 400;
    color:       var(--ink2);
    background:  var(--bg);
    line-height: 1.5;
    min-height:  100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    color:       var(--ink);
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

/* -- Spacing Scale ------------------------------------------ */
:root {
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;
}

/* -- Sidebar Width ------------------------------------------ */
:root {
    --sidebar-w: 64px;
}

/* -- League Gothic (self-hosted fallback via fontsource CDN) - */
/* Load from fontsource if not using npm                        */
@font-face {
    font-family: 'League Gothic';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/@fontsource/league-gothic@5.0.18/files/league-gothic-latin-400-normal.woff2') format('woff2');
}