@import url("components.css");

:root {

    --rgb-overlay: 255 255 255;
    --rgb-text: 245 239 230;
    --rgb-accent: 249 178 51;

    --color-canvas: #0f1a14;
    --color-surface: rgb(var(--rgb-overlay) / 0.06);
    --color-surface-subtle: rgb(var(--rgb-overlay) / 0.04);
    --color-surface-hover: rgb(var(--rgb-overlay) / 0.08);
    --color-border: rgb(var(--rgb-overlay) / 0.08);
    --color-border-strong: rgb(var(--rgb-overlay) / 0.12);

    --color-text-strong: #fcf7ed;
    --color-text: #f5efe6;
    --color-text-muted: rgb(var(--rgb-text) / 0.72);
    --color-text-faint: rgb(var(--rgb-text) / 0.6);

    --color-on-accent: #111111;
    --color-on-parchment: #2f1b19;

    --surface-parchment:
        repeating-linear-gradient(135deg, rgb(164 133 89 / 0.08), rgb(164 133 89 / 0.08) 2px, transparent 2px, transparent 10px),
        linear-gradient(180deg, rgb(252 247 237 / 0.97), rgb(231 216 187 / 0.97));
    --color-parchment-border: rgb(124 96 59 / 0.28);

    --color-accent: #f9b233;
    --color-accent-soft: rgb(var(--rgb-accent) / 0.12);
    --color-accent-border: rgb(var(--rgb-accent) / 0.6);
    --gradient-brand: linear-gradient(135deg, #f08149 0%, #8c070e 100%);

    --color-success: #87d9a2;
    --color-success-surface: rgb(64 125 89 / 0.24);
    --color-danger: #ffb8b8;
    --color-danger-surface: rgb(126 60 60 / 0.24);
    --color-warning: #f1c74d;

    --color-info: #8fc2fb;
    --color-focus: #258cfb;

    --color-warning-surface: color-mix(in srgb, var(--color-warning) 24%, transparent);
    --color-info-surface: color-mix(in srgb, var(--color-info) 24%, transparent);

    --shadow-raised: 0 3px 0 var(--color-ink);
    --shadow-hover: 0 5px 0 var(--color-ink);
    --shadow-panel: 0 8px 0 var(--color-ink);

    --font-display: "Grandstander", "Baloo 2", system-ui, sans-serif;
    --font-display-outline: "Horizon Outlined", sans-serif;
    --font-accent: "Baloo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "Baloo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-hand: "Patrick Hand", "Baloo 2", cursive;
    --font-pixel: "VT323", ui-monospace, monospace;

    /* Adventure Time "cartoon cel" look: flat fills, thick ink outlines, hard shadows. */
    --color-ink: #13201a;
    --color-cel: rgb(31 56 42 / 0.94);
    --color-cel-raised: #2b4d3a;
    --color-cel-line: #406b52;
    --color-field: rgb(15 29 21 / 0.9);
    --color-field-focus: rgb(21 40 29 / 0.96);
    --color-cream: #fff6df;
    --color-jake: #f9b233;
    --color-jake-hover: #ffc54d;
    --color-finn: #4fb3f6;
    --color-bubblegum: #f78fb3;
    --color-bmo: #5fbfa8;

    /* Bright kingdom accents, for small marks on top of a panel (edges, stickers). */
    --accent-forest: #7ccf6a;
    --accent-candy: #f78fb3;
    --accent-ember: #ff7a52;
    --accent-sky: #4fb3f6;
    --color-bmo-screen: #c9f2d6;
    --color-bmo-text: #14402f;

    --motion-palette: 600ms;

    --border-cel: 3px solid var(--color-ink);
    --border-cel-sm: 2px solid var(--color-ink);
    --shadow-cel: 0 8px 0 var(--color-ink);
    --shadow-cel-md: 0 5px 0 var(--color-ink);
    --shadow-cel-sm: 0 3px 0 var(--color-ink);
    --text-shadow-ink: 0 3px 0 var(--color-ink);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.125rem;
    --radius-pill: 999px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.625rem;
    --font-size-2xl: 2.25rem;

    --border-width: 1px;
    --motion-fast: 160ms;
}

/* Kingdom palettes. A landing section carries its own data-palette and the landing
   root mirrors the active one so the footer and overlays follow along; other pages
   (e.g. the profile) set one on their wrapper. "forest" is the default above. */
[data-palette="ember"] {
    --color-ink: #1f0a0c;
    --color-cel: rgb(84 22 27 / 0.94);
    --color-cel-raised: #6e2128;
    --color-cel-line: #93363b;
    --color-field: rgb(40 11 14 / 0.9);
    --color-field-focus: rgb(54 15 19 / 0.96);
}

[data-palette="candy"] {
    --color-ink: #2a0b1d;
    --color-cel: rgb(118 36 80 / 0.94);
    --color-cel-raised: #8f3566;
    --color-cel-line: #b5528a;
    --color-field: rgb(56 15 38 / 0.9);
    --color-field-focus: rgb(72 20 49 / 0.96);
}

[data-palette="sky"] {
    --color-ink: #0c1628;
    --color-cel: rgb(22 48 86 / 0.94);
    --color-cel-raised: #234679;
    --color-cel-line: #3a66a3;
    --color-field: rgb(11 25 46 / 0.9);
    --color-field-focus: rgb(15 33 60 / 0.96);
}