/* ═══════════════════════════════════════════════════════
   rct-keep — editorial design system
   ═══════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/fonts/inter-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
    /* ── Palette ── */
    --stone-50:  #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    --stone-900: #1c1917;

    --teal-50:   #f0fdfa;
    --teal-100:  #ccfbf1;
    --teal-400:  #2dd4bf;
    --teal-500:  #14b8a6;
    --teal-600:  #0d9488;
    --teal-700:  #0f766e;

    --red-50:    #fef2f2;
    --red-400:   #f87171;
    --red-500:   #ef4444;
    --red-600:   #dc2626;

    --amber-50:  #fffbeb;
    --amber-400: #fbbf24;
    --amber-600: #d97706;

    --emerald-50:  #ecfdf5;
    --emerald-600: #059669;

    --blue-50:   #eff6ff;
    --blue-600:  #2563eb;

    --violet-50: #f5f3ff;
    --violet-600:#7c3aed;

    /* ── Semantic tokens ── */
    --bg:           var(--stone-50);
    --fg:           var(--stone-800);
    --muted:        var(--stone-500);
    --border:       var(--stone-200);
    --surface:      #fff;
    --accent:       var(--teal-700);
    --accent-hover: var(--teal-600);
    --accent-light: var(--teal-50);
    --accent-glow:  rgba(15,118,110,0.12);
    --danger:       var(--red-500);
    --danger-hover: var(--red-600);
    --success-bg:   var(--emerald-50);
    --success-fg:   var(--emerald-600);
    --error-bg:     var(--red-50);
    --error-fg:     var(--red-600);
    --warning-bg:   var(--amber-50);
    --warning-fg:   var(--amber-600);

    /* ── Layout ── */
    --sidebar-w: 240px;

    /* ── Radii ── */
    --radius-sm: 6px;
    --radius:    8px;
    --radius-lg: 12px;
    --radius-xl: 18px;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.08);
    --shadow-xl: 0 20px 40px -12px rgba(0,0,0,0.12);

    /* ── Misc ── */
    --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ═══════════════════════════════════════════════════════
   Base
   ═══════════════════════════════════════════════════════ */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }

::selection { background: var(--teal-100); color: var(--teal-700); }