@import "tailwindcss";

/* ─── Des polices un peu stylées si vous voulez mon avis ─── */
@theme {
    --font-sans:    'Zen Kaku Gothic New', 'Yu Gothic', 'Hiragino Sans', system-ui, sans-serif;
    --font-display: 'Shippori Mincho', 'Yu Mincho', Georgia, serif;

    --color-accent:        var(--accent);
    --color-accent-hover:  var(--accent-hover);
    --color-accent-muted:  var(--accent-muted);
    --color-on-accent:     var(--on-accent);

    --color-sidebar:       var(--bg-sidebar);
    --color-main:          var(--bg-main);
    --color-card:          var(--bg-card);
    --color-hover:         var(--bg-hover);

    --color-border:        var(--border);
    --color-border-light:  var(--border-light);

    --color-primary:       var(--text-primary);
    --color-secondary:     var(--text-secondary);
    --color-muted:         var(--text-muted);

    --color-ok:            var(--ok);
    --color-err:           var(--err);

    --radius-card:   14px;
    --radius-field:  10px;
    --radius-poster: 6px;

    --text-body: 13.5px;
    --text-body--line-height: 1.5;
    --text-meta: 12.5px;
    --text-meta--line-height: 1.45;
}

/* ─── Palette ─── */
:root {
    --bg-sidebar:     #0e0a08;
    --bg-main:        #13100c;
    --bg-card:        #1d1814;
    --bg-hover:       #27221d;

    --border:         #352f2a;
    --border-light:   #27221d;

    --text-primary:   #efe9dd;
    --text-secondary: #b8b0a3;
    --text-muted:     #948b80;

    --gold:           #f2c44a;
    --ok:             #89d298;
    --err:            #ea8470;
    --on-accent:      #0e0a08;

    --accent:         #f2c44a;
    --accent-hover:   color-mix(in srgb, var(--accent) 80%, white);
    --accent-muted:   color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ─── Thèmes ─── */
[data-theme="vermillon"] { --accent: #e8734f; }
[data-theme="jade"]      { --accent: #6fc79a; }

/* ─── Base globale ─── */
*, *::before, *::after { box-sizing: border-box; }

html {
    color-scheme: dark;
    accent-color: var(--accent);
}

html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

:where(a, button, [role="switch"], summary):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Composants réutilisables ─── */
@layer components {
    /* Typo */
    .page-title {
        @apply font-display text-[28px] leading-tight font-bold text-primary;
    }
    .section-title {
        @apply font-display text-[21px] leading-snug font-bold text-primary;
    }
    .card-title {
        @apply text-[15px] font-bold text-primary;
    }
    .tag-label {
        @apply text-[10.5px] font-bold uppercase tracking-[0.14em] text-muted;
    }

    /* Boutons */
    .btn-primary,
    .btn-secondary,
    .btn-ghost,
    .btn-danger {
        @apply inline-flex items-center justify-center gap-2 h-10 px-[18px] rounded-full text-body whitespace-nowrap
        transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .btn-primary {
        @apply px-5 bg-accent text-on-accent font-bold hover:bg-accent-hover;
    }
    .btn-secondary {
        @apply border border-border text-primary font-semibold hover:bg-hover;
    }
    .btn-ghost {
        @apply border border-border-light text-secondary font-medium hover:bg-hover hover:text-primary;
    }
    .btn-danger {
        @apply border border-err/30 text-err font-semibold hover:bg-err/10;
    }
    .btn-icon {
        @apply inline-flex items-center justify-center shrink-0 w-10 h-10 rounded-full border border-border-light text-secondary
        transition-colors cursor-pointer hover:bg-hover hover:text-primary disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .btn-sm {
        @apply h-8 px-3.5 text-meta;
    }
    .btn-icon.btn-sm {
        @apply w-8 px-0;
    }

    /* Cartes et champs */
    .card {
        @apply bg-card rounded-card px-5 py-4;
    }

    .field-label {
        @apply block text-meta text-secondary;
    }

    .field {
        @apply w-full bg-main border border-border-light text-primary text-body px-3.5 py-2.5 rounded-field
        placeholder:text-muted outline-none focus:border-accent transition-colors;
    }

    /* Pastilles d'état */
    .pill {
        @apply inline-flex items-center gap-[7px] h-6 px-[11px] rounded-full border border-transparent
        text-[11.5px] font-bold whitespace-nowrap;
    }
    .pill-ok      { @apply border-ok/30 text-ok; }
    .pill-active  { @apply bg-accent-muted text-accent; }
    .pill-wait    { @apply border-accent/35 text-accent; }
    .pill-neutral { @apply border-border text-secondary; }
    .pill-err     { @apply border-err/35 text-err; }
    .pill-muted   { @apply border-border-light text-muted; }

    /* Filtres et onglets compteurs */
    .chip {
        @apply inline-flex items-center gap-2 h-[34px] px-3.5 rounded-full border border-border-light text-[13px] font-medium
        text-secondary whitespace-nowrap transition-colors cursor-pointer hover:text-primary hover:bg-hover;
    }
    .chip-count {
        @apply text-muted;
    }
    .chip.is-active {
        @apply border-primary bg-primary text-on-accent font-bold hover:bg-primary;
    }
    .chip.is-active .chip-count {
        @apply text-on-accent/55 font-medium;
    }
    .chip-row {
        @apply flex items-center gap-1.5 flex-wrap;
    }
    .chip-row > * {
        @apply shrink-0;
    }
    /* Sur mobile, les filtres défilent sur une ligne jusqu'aux bords de l'écran */
    @media (width < 48rem) {
        .chip-row {
            @apply flex-nowrap overflow-x-auto -mx-4 px-4 -my-1 py-1;
            scrollbar-width: none;
        }
    }

    /* Bascule */
    .switch {
        @apply relative inline-flex shrink-0 w-[46px] h-[26px] p-[3px] rounded-full bg-hover transition-colors cursor-pointer
        disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .switch-knob {
        @apply block w-5 h-5 rounded-full bg-muted transition-transform duration-200;
    }
    .switch[aria-checked="true"] {
        @apply bg-accent;
    }
    .switch[aria-checked="true"] .switch-knob {
        @apply translate-x-5 bg-on-accent;
    }

    /* Sélecteur */
    .segmented {
        @apply inline-flex items-center gap-0.5 h-[34px] p-[3px] rounded-full border border-border-light;
    }
    .segmented-item {
        @apply inline-flex items-center h-[26px] px-3.5 rounded-full text-meta text-secondary whitespace-nowrap
        transition-colors cursor-pointer hover:text-primary;
    }
    .segmented-item.is-active {
        @apply bg-accent text-on-accent font-bold hover:text-on-accent;
    }
    .segmented-lg {
        @apply h-[38px];
    }
    .segmented-lg .segmented-item {
        @apply h-[30px] px-4 text-[13px];
    }

    /* Barres de progression */
    .progress {
        @apply h-[3px] rounded-[2px] bg-hover overflow-hidden;
    }
    .progress-bar {
        @apply h-full rounded-[2px] bg-accent transition-[width] duration-500;
    }

    /* Menus déroulants et pop */
    .menu {
        @apply bg-card border border-border rounded-card p-1.5 shadow-[0_16px_40px_rgb(0_0_0/0.5)] flex flex-col gap-0.5;
    }
    .menu-item {
        @apply flex items-center gap-2.5 w-full min-h-9 px-3 py-2 rounded-lg text-left text-body text-secondary
        transition-colors cursor-pointer hover:bg-hover hover:text-primary disabled:opacity-40 disabled:cursor-not-allowed;
    }
    .modal-backdrop {
        @apply fixed inset-0 z-50 flex items-center justify-center px-4 bg-sidebar/75;
    }
    .modal {
        @apply w-full bg-card border border-border rounded-card p-6 flex flex-col gap-5 shadow-[0_24px_60px_rgb(0_0_0/0.55)];
    }


    .stamp-new {
        @apply inline-block px-2 pt-[3px] pb-[2px] border-2 border-accent bg-sidebar/85 text-accent
        font-display text-[11px] font-bold leading-none tracking-[0.12em] -rotate-6;
    }

    @media (pointer: coarse) {
        .btn-primary,
        .btn-secondary,
        .btn-ghost,
        .btn-danger {
            @apply h-11;
        }
        .btn-icon {
            @apply w-11 h-11;
        }
        .btn-sm {
            @apply h-10;
        }
        .btn-icon.btn-sm {
            @apply w-10;
        }
        .chip {
            @apply h-10;
        }
        .menu-item {
            @apply min-h-11;
        }
    }

    .dot-grid {
        @apply absolute inset-0 pointer-events-none;
        background-image: radial-gradient(color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1.5px);
        background-size: 7px 7px;
        mask-image: linear-gradient(var(--dot-grid-angle, 90deg), #000 0%, transparent var(--dot-grid-fade, 55%));
    }
}