@font-face {
    font-family: 'Dela Gothic One';
    src: url('../fonts/DelaGothicOne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cabinet Grotesk';
    src: url('../fonts/CabinetGrotesk-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cabinet Grotesk';
    src: url('../fonts/CabinetGrotesk-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cabinet Grotesk';
    src: url('../fonts/CabinetGrotesk-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-kraft-light: #FBF4E8;
    --bg-kraft-dark: #161310;
    --bg-grid-light: rgba(180, 160, 130, 0.28);
    --bg-grid-dark: rgba(235, 217, 188, 0.10);
    --card-bg-light: #FFFDF9;
    --card-bg-dark: #211C17;
    --card-hover-light: #FFFFFA;
    --card-hover-dark: #29221C;
    --cardboard-raw-light: #EBD9BC;
    --cardboard-raw-dark: #2E261E;
    --ink-light: #161616;
    --ink-dark: #F5EFE6;
    --ink-muted-light: rgba(22, 22, 22, 0.85);
    --ink-muted-dark: rgba(245, 239, 230, 0.86);
    --ink-soft-light: rgba(22, 22, 22, 0.72);
    --ink-soft-dark: rgba(245, 239, 230, 0.70);
    --border-color-light: #161616;
    --border-color-dark: #5E5040;
    --shadow-color-light: #161616;
    --shadow-color-dark: #080705;
    --stamp-red-light: #E03131;
    --stamp-red-dark-mode: #FF6B6B;
    --dock-blue-light: #1971C2;
    --dock-blue-dark-mode: #74C0FC;
    --approved-bg-light: #D3F9D8;
    --approved-bg-dark: #173621;
    --approved-fg-light: #1B5E20;
    --approved-fg-dark: #8CE99A;
    --error-bg-light: #FFE3E3;
    --error-bg-dark: #3B1818;
    --error-fg-light: #C92A2A;
    --error-fg-dark: #FFA8A8;
    --input-bg-light: #FFFFFF;
    --input-bg-dark: #181410;
    --scrollbar-thumb-light: #78644E;
    --scrollbar-thumb-dark: #9C856B;
    --scrollbar-track-light: #EFE3CE;
    --scrollbar-track-dark: #1E1914;

    --ink-fixed-dark: #161616;
    --tape-yellow: #FFC72C;
    --tape-yellow-bright: #FFE066;
    --stamp-red-solid: #E03131;

    /* Default (Light) fallback values */
    --color-scheme: light;
    --bg-kraft: var(--bg-kraft-light);
    --bg-grid: var(--bg-grid-light);
    --card-bg: var(--card-bg-light);
    --card-hover: var(--card-hover-light);
    --cardboard-raw: var(--cardboard-raw-light);
    --ink-black: var(--ink-light);
    --ink-muted: var(--ink-muted-light);
    --ink-soft: var(--ink-soft-light);
    --border-ink: var(--border-color-light);
    --shadow-ink: var(--shadow-color-light);
    --stamp-red: var(--stamp-red-light);
    --dock-blue: var(--dock-blue-light);
    --approved-bg: var(--approved-bg-light);
    --approved-fg: var(--approved-fg-light);
    --error-bg: var(--error-bg-light);
    --error-fg: var(--error-fg-light);
    --input-bg: var(--input-bg-light);
    --scrollbar-thumb: var(--scrollbar-thumb-light);
    --scrollbar-track: var(--scrollbar-track-light);

    @media (prefers-color-scheme: dark) {
        --color-scheme: dark;
        --bg-kraft: var(--bg-kraft-dark);
        --bg-grid: var(--bg-grid-dark);
        --card-bg: var(--card-bg-dark);
        --card-hover: var(--card-hover-dark);
        --cardboard-raw: var(--cardboard-raw-dark);
        --ink-black: var(--ink-dark);
        --ink-muted: var(--ink-muted-dark);
        --ink-soft: var(--ink-soft-dark);
        --border-ink: var(--border-color-dark);
        --shadow-ink: var(--shadow-color-dark);
        --stamp-red: var(--stamp-red-dark-mode);
        --dock-blue: var(--dock-blue-dark-mode);
        --approved-bg: var(--approved-bg-dark);
        --approved-fg: var(--approved-fg-dark);
        --error-bg: var(--error-bg-dark);
        --error-fg: var(--error-fg-dark);
        --input-bg: var(--input-bg-dark);
        --scrollbar-thumb: var(--scrollbar-thumb-dark);
        --scrollbar-track: var(--scrollbar-track-dark);
    }

    &:has(> head > meta[name="color-scheme"][content="dark"]),
    &[data-theme="dark"] {
        color-scheme: dark;
        --color-scheme: dark;
        --bg-kraft: var(--bg-kraft-dark);
        --bg-grid: var(--bg-grid-dark);
        --card-bg: var(--card-bg-dark);
        --card-hover: var(--card-hover-dark);
        --cardboard-raw: var(--cardboard-raw-dark);
        --ink-black: var(--ink-dark);
        --ink-muted: var(--ink-muted-dark);
        --ink-soft: var(--ink-soft-dark);
        --border-ink: var(--border-color-dark);
        --shadow-ink: var(--shadow-color-dark);
        --stamp-red: var(--stamp-red-dark-mode);
        --dock-blue: var(--dock-blue-dark-mode);
        --approved-bg: var(--approved-bg-dark);
        --approved-fg: var(--approved-fg-dark);
        --error-bg: var(--error-bg-dark);
        --error-fg: var(--error-fg-dark);
        --input-bg: var(--input-bg-dark);
        --scrollbar-thumb: var(--scrollbar-thumb-dark);
        --scrollbar-track: var(--scrollbar-track-dark);
    }

    &:has(> head > meta[name="color-scheme"][content="light"]),
    &[data-theme="light"] {
        color-scheme: light;
        --color-scheme: light;
        --bg-kraft: var(--bg-kraft-light);
        --bg-grid: var(--bg-grid-light);
        --card-bg: var(--card-bg-light);
        --card-hover: var(--card-hover-light);
        --cardboard-raw: var(--cardboard-raw-light);
        --ink-black: var(--ink-light);
        --ink-muted: var(--ink-muted-light);
        --ink-soft: var(--ink-soft-light);
        --border-ink: var(--border-color-light);
        --shadow-ink: var(--shadow-color-light);
        --stamp-red: var(--stamp-red-light);
        --dock-blue: var(--dock-blue-light);
        --approved-bg: var(--approved-bg-light);
        --approved-fg: var(--approved-fg-light);
        --error-bg: var(--error-bg-light);
        --error-fg: var(--error-fg-light);
        --input-bg: var(--input-bg-light);
        --scrollbar-thumb: var(--scrollbar-thumb-light);
        --scrollbar-track: var(--scrollbar-track-light);
    }

    @supports (color: light-dark(white, black)) {
        --bg-kraft: light-dark(var(--bg-kraft-light), var(--bg-kraft-dark));
        --bg-grid: light-dark(var(--bg-grid-light), var(--bg-grid-dark));
        --card-bg: light-dark(var(--card-bg-light), var(--card-bg-dark));
        --card-hover: light-dark(var(--card-hover-light), var(--card-hover-dark));
        --cardboard-raw: light-dark(var(--cardboard-raw-light), var(--cardboard-raw-dark));
        --ink-black: light-dark(var(--ink-light), var(--ink-dark));
        --ink-muted: light-dark(var(--ink-muted-light), var(--ink-muted-dark));
        --ink-soft: light-dark(var(--ink-soft-light), var(--ink-soft-dark));
        --border-ink: light-dark(var(--border-color-light), var(--border-color-dark));
        --shadow-ink: light-dark(var(--shadow-color-light), var(--shadow-color-dark));
        --stamp-red: light-dark(var(--stamp-red-light), var(--stamp-red-dark-mode));
        --dock-blue: light-dark(var(--dock-blue-light), var(--dock-blue-dark-mode));
        --approved-bg: light-dark(var(--approved-bg-light), var(--approved-bg-dark));
        --approved-fg: light-dark(var(--approved-fg-light), var(--approved-fg-dark));
        --error-bg: light-dark(var(--error-bg-light), var(--error-bg-dark));
        --error-fg: light-dark(var(--error-fg-light), var(--error-fg-dark));
        --input-bg: light-dark(var(--input-bg-light), var(--input-bg-dark));
        --scrollbar-thumb: light-dark(var(--scrollbar-thumb-light), var(--scrollbar-thumb-dark));
        --scrollbar-track: light-dark(var(--scrollbar-track-light), var(--scrollbar-track-dark));
    }

    @media (forced-colors: active) {
        --bg-kraft: Canvas;
        --card-bg: Canvas;
        --cardboard-raw: Canvas;
        --ink-black: CanvasText;
        --ink-muted: CanvasText;
        --ink-soft: CanvasText;
        --border-ink: CanvasText;
        --shadow-ink: CanvasText;
        --dock-blue: LinkText;
    }

    color-scheme: light dark;
    accent-color: var(--stamp-red);
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);

    --target-size: 24px;
    --shadow-hard: 4px 4px 0 var(--shadow-ink);
    --shadow-hard-lg: 6px 6px 0 var(--shadow-ink);
    --border-thick: 2.5px solid var(--border-ink);
    --font-heading: 'Dela Gothic One', sans-serif;
    --font-body: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Cabinet Grotesk', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (pointer: coarse) {
    :root {
        --target-size: 38px;
    }
}

/* Bilingual FR / EN visibility branching */
html:not([lang="en"]) [data-lang="en"] {
    display: none !important;
}

html[lang="en"] [data-lang="fr"] {
    display: none !important;
}

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

html {
    max-inline-size: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

html, body {
    background-color: var(--bg-kraft);
    background-image: 
        radial-gradient(var(--bg-grid) 1.2px, transparent 1.2px),
        linear-gradient(to right, rgba(128, 110, 90, 0.04) 1px, transparent 1px);
    background-size: 22px 22px, 100px 100px;
    color: var(--ink-black);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

body {
    max-inline-size: 100%;
    overflow-x: clip;
}

code {
    overflow-wrap: anywhere;
    word-break: break-word;
}

h1, h2, h3 {
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

a {
    color: inherit;
    text-decoration: none;
}