/* ==========================================================================
   SETU Design Tokens
   Central design token system for the entire application.
   Light mode is default; dark mode activates via [data-theme="dark"].

   Naming: --s-{category}-{property}-{variant}
   Categories: color, font, space, radius, shadow, z

   NOTE: the accent (deep teal) and sidebar (pine) colours are placeholders
   picked to be clearly distinct from Monti's amber/navy — swap them here
   once Setu has a real brand palette. Everything downstream reads these
   tokens, so this file is the only place to change.
   ========================================================================== */

/* ---------- Google Fonts: Inter (UI + data) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   LIGHT MODE (default)
   ========================================================================== */
:root {
    /* ---- Typography ---- */
    --s-font-family:        'Inter', system-ui, -apple-system, sans-serif;
    --s-font-mono:          'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --s-font-size-xs:       0.6875rem;   /* 11px — dense table cells / th */
    --s-font-size-sm:       0.75rem;     /* 12px — dense table body */
    --s-font-size-md:       0.875rem;    /* 14px */
    --s-font-size-base:     0.9375rem;   /* 15px — normal page UI */
    --s-font-size-lg:       1rem;        /* 16px */
    --s-font-size-xl:       1.125rem;    /* 18px */
    --s-font-size-2xl:      1.25rem;     /* 20px */
    --s-font-size-3xl:      1.5rem;      /* 24px */
    --s-font-weight-normal: 400;
    --s-font-weight-medium: 500;
    --s-font-weight-semibold: 600;
    --s-font-weight-bold:   700;
    --s-line-height:        1.6;
    --s-line-height-tight:  1.25;
    --s-line-height-control: 1.2;

    /* ---- Colors: Neutrals (cool, faintly green-tinted canvas) ---- */
    --s-color-bg:           #F5F7F5;
    --s-color-bg-alt:       #EBEFEA;
    --s-color-surface:      #ffffff;
    --s-color-surface-hover:#F6F8F6;
    --s-color-surface-raised:#ffffff;
    --s-color-border:       #E1E5DF;
    --s-color-border-strong:#C8CEC5;
    --s-color-text:         #1A1D1B;
    --s-color-text-secondary:#657068;
    --s-color-text-tertiary:#97A19A;
    --s-color-text-inverse: #ffffff;
    --s-color-input-bg:     #ffffff;
    --s-color-input-text:   #1A1D1B;
    --s-color-input-placeholder:#97A19A;

    /* ---- Colors: Brand / Accent (PLACEHOLDER — deep teal) ---- */
    --s-color-accent:       #0F766E;
    --s-color-accent-hover: #0C5F59;
    --s-color-accent-light: rgba(15, 118, 110, 0.10);
    --s-color-accent-text:  #11544E;

    /* ---- Colors: Sidebar (PLACEHOLDER — deep pine) ---- */
    --s-sidebar-bg:         #1F3D36;
    --s-sidebar-text:       rgba(255, 255, 255, 0.72);
    --s-sidebar-text-hover: #ffffff;
    --s-sidebar-border:     rgba(255, 255, 255, 0.10);
    --s-sidebar-active-bg:  rgba(45, 191, 169, 0.18);

    /* ---- Colors: Semantic (status) ---- */
    --s-color-success:      #16a34a;
    --s-color-success-bg:   #f0fdf4;
    --s-color-success-text: #166534;
    --s-color-warning:      #d97706;
    --s-color-warning-bg:   #fffbeb;
    --s-color-warning-text: #92400e;
    --s-color-danger:       #dc2626;
    --s-color-danger-bg:    #fef2f2;
    --s-color-danger-text:  #991b1b;
    --s-color-info:         #0891b2;
    --s-color-info-bg:      #ecfeff;
    --s-color-info-text:    #155e75;

    /* ---- Spacing ---- */
    --s-space-1:  0.25rem;   /* 4px */
    --s-space-2:  0.5rem;    /* 8px */
    --s-space-3:  0.75rem;   /* 12px */
    --s-space-4:  1rem;      /* 16px */
    --s-space-5:  1.25rem;   /* 20px */
    --s-space-6:  1.5rem;    /* 24px */
    --s-space-8:  2rem;      /* 32px */

    /* ---- Border radius ---- */
    --s-radius-sm:  0.25rem;
    --s-radius-md:  0.375rem;
    --s-radius-lg:  0.5rem;
    --s-radius-xl:  0.75rem;
    --s-radius-full:50%;

    /* ---- Shadows ---- */
    --s-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --s-shadow-md:  0 2px 6px rgba(0, 0, 0, 0.08);
    --s-shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.1);
    --s-shadow-xl:  0 8px 24px rgba(0, 0, 0, 0.12);

    /* ---- Z-index ---- */
    --s-z-dropdown:  100;
    --s-z-sticky:    200;
    --s-z-sidebar:   1000;
    --s-z-popover:   1060;
    --s-z-toast:     1100;

    /* ---- Transitions ---- */
    --s-transition-fast:   0.15s ease;
    --s-transition-normal: 0.2s ease;
    --s-transition-slow:   0.3s ease;

    /* ---- Layout ---- */
    --s-sidebar-width: 64px;
    --s-content-max-width: 76rem;
}


/* ==========================================================================
   DARK MODE
   ========================================================================== */
[data-theme="dark"] {
    /* ---- Neutrals ---- */
    --s-color-bg:           #0C0F0E;
    --s-color-bg-alt:       #131716;
    --s-color-surface:      #1B201E;
    --s-color-surface-hover:#242A27;
    --s-color-surface-raised:#232926;
    --s-color-border:       #333B37;
    --s-color-border-strong:#454F4A;
    --s-color-text:         #F4F6F5;
    --s-color-text-secondary:#C2CBC6;
    --s-color-text-tertiary:#7E8A84;
    --s-color-text-inverse: #1A1D1B;
    --s-color-input-bg:     #232926;
    --s-color-input-text:   #F4F6F5;
    --s-color-input-placeholder:#7E8A84;

    /* ---- Accent ---- */
    --s-color-accent:       #2DBFA9;
    --s-color-accent-hover: #43D6C0;
    --s-color-accent-light: rgba(45, 191, 169, 0.12);
    --s-color-accent-text:  #2DBFA9;

    /* ---- Sidebar ---- */
    --s-sidebar-bg:         #101413;
    --s-sidebar-text:       rgba(255, 255, 255, 0.7);
    --s-sidebar-text-hover: #ffffff;
    --s-sidebar-border:     rgba(255, 255, 255, 0.08);
    --s-sidebar-active-bg:  rgba(255, 255, 255, 0.10);

    /* ---- Semantic ---- */
    --s-color-success-bg:   rgba(22, 163, 74, 0.12);
    --s-color-success-text: #4ade80;
    --s-color-warning-bg:   rgba(217, 119, 6, 0.12);
    --s-color-warning-text: #fbbf24;
    --s-color-danger-bg:    rgba(220, 38, 38, 0.12);
    --s-color-danger-text:  #f87171;
    --s-color-info-bg:      rgba(8, 145, 178, 0.12);
    --s-color-info-text:    #22d3ee;

    /* ---- Shadows (stronger for dark backgrounds) ---- */
    --s-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.2);
    --s-shadow-md:  0 2px 6px rgba(0, 0, 0, 0.3);
    --s-shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.35);
    --s-shadow-xl:  0 8px 24px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   BASE RESETS & TYPOGRAPHY
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--s-font-family);
    font-size: var(--s-font-size-base);
    line-height: var(--s-line-height);
    color: var(--s-color-text);
    background-color: var(--s-color-bg);
    min-height: 100vh;
    margin: 0;
    transition: background-color var(--s-transition-normal),
                color var(--s-transition-normal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--s-font-family);
    font-weight: var(--s-font-weight-semibold);
    line-height: var(--s-line-height-tight);
    color: var(--s-color-text);
    margin: 0 0 var(--s-space-3);
}

h1 { font-size: var(--s-font-size-2xl); }
h2 { font-size: var(--s-font-size-lg); }
h3 { font-size: var(--s-font-size-base); }
h4 { font-size: var(--s-font-size-md); }

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

code, pre, kbd {
    font-family: var(--s-font-mono);
}

small, .small {
    font-size: var(--s-font-size-sm);
}

::selection {
    background: var(--s-color-accent-light);
    color: inherit;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--s-color-border-strong);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--s-color-text-tertiary);
}

/* Utility: hide until Alpine loads */
[x-cloak] { display: none !important; }