/* Minimal CSS — layout handled by Tailwind */

/* ── Color tokens ── */
:root {
    --color-primary:                    23 49 36;
    --color-on-primary:                 255 255 255;
    --color-primary-container:          45 71 57;
    --color-on-primary-container:       152 181 163;
    --color-primary-fixed:              204 234 214;
    --color-primary-fixed-dim:          176 205 187;
    --color-on-primary-fixed:           6 32 20;
    --color-on-primary-fixed-variant:   50 76 62;
    --color-secondary:                  126 87 0;
    --color-on-secondary:               255 255 255;
    --color-secondary-container:        254 197 100;
    --color-on-secondary-container:     118 81 0;
    --color-secondary-fixed:            255 222 172;
    --color-secondary-fixed-dim:        245 189 93;
    --color-on-secondary-fixed:         40 25 0;
    --color-on-secondary-fixed-variant: 96 65 0;
    --color-tertiary:                   86 19 7;
    --color-on-tertiary:                255 255 255;
    --color-tertiary-container:         116 41 26;
    --color-on-tertiary-container:      251 145 124;
    --color-tertiary-fixed:             255 218 211;
    --color-tertiary-fixed-dim:         255 180 165;
    --color-on-tertiary-fixed:          62 4 0;
    --color-on-tertiary-fixed-variant:  123 46 31;
    --color-error:                      186 26 26;
    --color-on-error:                   255 255 255;
    --color-error-container:            255 218 214;
    --color-on-error-container:         147 0 10;
    --color-background:                 251 249 244;
    --color-on-background:              27 28 25;
    --color-surface:                    251 249 244;
    --color-on-surface:                 27 28 25;
    --color-surface-variant:            228 226 221;
    --color-on-surface-variant:         66 72 68;
    --color-outline:                    114 121 115;
    --color-outline-variant:            194 200 194;
    --color-surface-container-lowest:   255 255 255;
    --color-surface-container-low:      245 243 238;
    --color-surface-container:          240 238 233;
    --color-surface-container-high:     234 232 227;
    --color-surface-container-highest:  228 226 221;
    --color-surface-dim:                219 218 213;
    --color-surface-bright:             251 249 244;
    --color-surface-tint:               73 100 85;
    --color-inverse-surface:            48 49 46;
    --color-inverse-on-surface:         242 241 236;
    --color-inverse-primary:            176 205 187;
}

.dark {
    --color-primary:                    176 205 187;
    --color-on-primary:                 27 53 39;
    --color-primary-container:          50 76 62;
    --color-on-primary-container:       204 234 214;
    --color-primary-fixed:              204 234 214;
    --color-primary-fixed-dim:          176 205 187;
    --color-on-primary-fixed:           6 32 20;
    --color-on-primary-fixed-variant:   50 76 62;
    --color-secondary:                  245 189 93;
    --color-on-secondary:               66 45 0;
    --color-secondary-container:        96 65 0;
    --color-on-secondary-container:     255 222 172;
    --color-secondary-fixed:            255 222 172;
    --color-secondary-fixed-dim:        245 189 93;
    --color-on-secondary-fixed:         40 25 0;
    --color-on-secondary-fixed-variant: 96 65 0;
    --color-tertiary:                   255 180 165;
    --color-on-tertiary:                86 19 7;
    --color-tertiary-container:         116 41 26;
    --color-on-tertiary-container:      255 218 211;
    --color-tertiary-fixed:             255 218 211;
    --color-tertiary-fixed-dim:         255 180 165;
    --color-on-tertiary-fixed:          62 4 0;
    --color-on-tertiary-fixed-variant:  123 46 31;
    --color-error:                      255 180 171;
    --color-on-error:                   105 0 5;
    --color-error-container:            147 0 10;
    --color-on-error-container:         255 218 214;
    --color-background:                 19 21 19;
    --color-on-background:              226 227 221;
    --color-surface:                    19 21 19;
    --color-on-surface:                 226 227 221;
    --color-surface-variant:            66 72 68;
    --color-on-surface-variant:         194 200 194;
    --color-outline:                    140 147 144;
    --color-outline-variant:            66 72 68;
    --color-surface-container-lowest:   14 16 14;
    --color-surface-container-low:      27 28 25;
    --color-surface-container:          31 33 30;
    --color-surface-container-high:     41 43 40;
    --color-surface-container-highest:  52 54 50;
    --color-surface-dim:                19 21 19;
    --color-surface-bright:             56 58 54;
    --color-surface-tint:               176 205 187;
    --color-inverse-surface:            226 227 221;
    --color-inverse-on-surface:         46 48 45;
    --color-inverse-primary:            73 100 85;
}

/* ── Toast notification ── */
#app-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    background: rgb(var(--color-inverse-surface));
    color: rgb(var(--color-inverse-on-surface));
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.6rem 1.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 9999;
    white-space: nowrap;
}

#app-toast.app-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Animations ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn 0.3s ease forwards; }

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgb(var(--color-background)); }
::-webkit-scrollbar-thumb { background: rgb(var(--color-outline-variant)); }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-on-surface-variant)); }
* { scrollbar-width: thin; scrollbar-color: rgb(var(--color-outline-variant)) rgb(var(--color-background)); }

/* ── Grain texture ── */
.grain-overlay {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.018;
    pointer-events: none;
}

/* ── Material symbols baseline align ── */
.material-symbols-outlined {
    vertical-align: middle;
}

/* ── Hide scrollbar while keeping scroll ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }