/* Achika — Colors & Type tokens
 * Derived from: achika-site (Tailwind v4) + app.achika.lt (Angular + Tailwind + Material)
 * Core palette: Tailwind `slate` (neutral) + `emerald` (brand accent).
 * Status scale: blue/amber/rose/violet/sky/green on -50/-200/-700/-900 shades.
 */

/* -------------------------------------------------------------------
 * Brand typeface — Roboto Flex (variable: opsz, slnt, wdth, wght + GRAD/YTAS/…)
 * Self-hosted. Relative path assumes colors_and_type.css at project root.
 * ------------------------------------------------------------------- */
@font-face {
    font-family: 'Roboto Flex';
    src: url('../assets/fonts/RobotoFlex.ttf') format('truetype-variations'),
         url('../assets/fonts/RobotoFlex.ttf') format('truetype');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-style: normal;
    font-display: swap;
}

:root {
    /* -------------------------------------------------------------
     * Brand — Emerald scale (logo greens snap to emerald-700/500/200)
     * ------------------------------------------------------------- */
    --brand-50:  #ecfdf5;
    --brand-100: #d1fae5;
    --brand-200: #a7f3d0;
    --brand-300: #6ee7b7;
    --brand-400: #34d399;
    --brand-500: #10b981;  /* emerald-500 — small dots / live indicators */
    --brand-600: #059669;
    --brand-700: #047857;  /* emerald-700 — primary brand text / inline emphasis */
    --brand-800: #065f46;
    --brand-900: #064e3b;

    /* Exact logo colors (not part of the emerald scale) */
    --logo-dark:   #1f7a3f;  /* back row */
    --logo-mid:    #5DAA62;  /* middle row */
    --logo-light:  #B4E8A8;  /* front row */

    /* -------------------------------------------------------------
     * Neutral — Tailwind Slate (the dominant surface family)
     * ------------------------------------------------------------- */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* -------------------------------------------------------------
     * Semantic tokens — what components should actually reference
     * ------------------------------------------------------------- */
    --fg-1:          var(--slate-950);   /* headings, primary */
    --fg-2:          var(--slate-900);   /* body strong */
    --fg-3:          var(--slate-600);   /* body */
    --fg-4:          var(--slate-500);   /* secondary */
    --fg-muted:      var(--slate-400);   /* hint, placeholder */
    --fg-on-dark:    #ffffff;
    --fg-on-dark-2:  var(--slate-300);
    --fg-on-brand:   #ffffff;
    --fg-accent:     var(--brand-700);   /* inline brand emphasis */

    --bg-app:        var(--slate-50);    /* page bg (marketing + app shell) */
    --bg-surface:    #ffffff;            /* cards, sheets, nav, header */
    --bg-subtle:     var(--slate-50);    /* card inner / row hover */
    --bg-muted:      var(--slate-100);
    --bg-inverse:    var(--slate-900);   /* sidebar, primary button, footer icons */
    --bg-inverse-2:  var(--slate-800);   /* hover on inverse */

    --border-1:      var(--slate-200);   /* default divider */
    --border-2:      var(--slate-300);   /* field border */
    --border-strong: var(--slate-400);   /* hover on field border */
    --border-accent: var(--brand-200);   /* secondary-button border */

    /* -------------------------------------------------------------
     * Status — paired -50 / -200 / -700 / -900 (as used in product)
     * Pattern: bg-{c}-50  ring-{c}-200  text-{c}-700  (badge)
     *          bg-{c}-50  ring-{c}-200  text-{c}-900  (alert block)
     * ------------------------------------------------------------- */
    --status-info-bg:     #eff6ff;  --status-info-border: #bfdbfe;  --status-info-fg: #1d4ed8;  --status-info-strong: #1e3a8a;
    --status-warn-bg:     #fffbeb;  --status-warn-border: #fde68a;  --status-warn-fg: #b45309;  --status-warn-strong: #78350f;
    --status-danger-bg:   #fff1f2;  --status-danger-border: #fecdd3; --status-danger-fg: #be123c; --status-danger-strong: #881337;
    --status-success-bg:  #ecfdf5;  --status-success-border: #a7f3d0; --status-success-fg: #047857; --status-success-strong: #064e3b;
    --status-muted-bg:    var(--slate-100); --status-muted-border: var(--slate-200); --status-muted-fg: var(--slate-700); --status-muted-strong: var(--slate-900);
    --status-violet-bg:   #f5f3ff;  --status-violet-border: #ddd6fe; --status-violet-fg: #6d28d9; --status-violet-strong: #4c1d95;
    --status-sky-bg:      #f0f9ff;  --status-sky-border: #bae6fd;  --status-sky-fg: #0369a1;  --status-sky-strong: #0c4a6e;

    /* -------------------------------------------------------------
     * Sidebar (app shell — dark slate-900 with slate-400 text)
     * ------------------------------------------------------------- */
    --sidebar-bg:        var(--slate-900);
    --sidebar-fg:        var(--slate-400);
    --sidebar-fg-hover:  var(--slate-100);
    --sidebar-fg-active: #ffffff;
    --sidebar-accent:    #38bdf8cc;   /* sky-400/80 — active left border */
    --sidebar-hover-bg:  rgba(255,255,255,0.03);
    --sidebar-active-bg: rgba(255,255,255,0.08);

    /* -------------------------------------------------------------
     * Type — Roboto Flex is the brand typeface (self-hosted variable).
     * Fallback stack leads with Inter for parity with the existing live sites
     * until they migrate, then system fonts.
     * ------------------------------------------------------------- */
    --font-sans: 'Roboto Flex', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* Size scale (mirrors Tailwind defaults used across the two products) */
    --text-xs:   0.75rem;   /* 12 — badges, column labels */
    --text-sm:   0.875rem;  /* 14 — body / nav / buttons */
    --text-base: 1rem;      /* 16 — body large / p */
    --text-lg:   1.125rem;  /* 18 — lede paragraph */
    --text-xl:   1.25rem;   /* 20 — sub-heading */
    --text-2xl:  1.5rem;    /* 24 — page title (app) */
    --text-3xl:  1.875rem;  /* 30 — section heading (marketing) */
    --text-4xl:  2.25rem;   /* 36 — section headline */
    --text-5xl:  3rem;      /* 48 — hero */
    --text-6xl:  3.75rem;   /* 60 — hero (lg+) */

    --lh-tight:  1.1;
    --lh-snug:   1.25;
    --lh-normal: 1.5;
    --lh-body:   1.75;   /* leading-7 used heavily for body copy */
    --lh-relaxed:2;      /* leading-8 for hero paragraphs */

    --fw-regular: 400;
    --fw-medium:  500;   /* buttons, nav-active */
    --fw-semibold:600;   /* h1-h3, nav titles */
    --fw-bold:    700;
    --fw-extrabold: 800; /* auth screen headline */

    --tracking-tight:   -0.02em;  /* tracking-tight on headings */
    --tracking-normal:  0;
    --tracking-wide:    0.05em;
    --tracking-eyebrow: 0.2em;    /* uppercase section eyebrows */

    /* -------------------------------------------------------------
     * Radius — large radii are a key brand cue
     * ------------------------------------------------------------- */
    --radius-sm:  0.25rem;   /* 4  — inputs when tight */
    --radius-md:  0.5rem;    /* 8  — table badges, form fields */
    --radius-lg:  0.75rem;   /* 12 — buttons (rounded-xl) */
    --radius-xl:  1rem;      /* 16 — card rows inside product screenshot */
    --radius-2xl: 1rem;      /* 16 — secondary cards */
    --radius-3xl: 1.5rem;    /* 24 — feature cards, inner panels */
    --radius-4xl: 2rem;      /* 32 — hero frame, contact card, "simple by design" block */
    --radius-full: 9999px;   /* pills, badges, status dot */

    /* -------------------------------------------------------------
     * Shadow — soft, low-opacity slate tints (never black)
     * ------------------------------------------------------------- */
    --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 10px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 10px 24px -6px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
    --shadow-hero: 0 20px 80px -30px rgba(15, 23, 42, 0.35);     /* exact product screenshot shadow */
    --shadow-auth: 0 24px 80px -32px rgba(15, 23, 42, 0.35);     /* auth card */
    --shadow-ring: 0 0 0 1px var(--border-1);

    /* -------------------------------------------------------------
     * Spacing / layout
     * ------------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --container-max: 80rem;      /* max-w-7xl */
    --nav-width:     240px;      /* app sidebar */
    --header-height: 96px;       /* app header h-24 */

    /* Focus */
    --focus-ring: 0 0 0 2px rgba(56, 189, 248, 0.40);  /* sky-400/40 */
}

/* -------------------------------------------------------------------
 * Semantic element defaults (only opt-in — apply to .achika-body)
 * ------------------------------------------------------------------- */
.achika-body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    color: var(--fg-2);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.achika-body h1, .achika-h1 {
    font-size: clamp(2.25rem, 3vw + 1rem, 3.75rem);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
    color: var(--fg-1);
}
.achika-body h2, .achika-h2 {
    font-size: clamp(1.875rem, 1.5vw + 1rem, 2.25rem);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    color: var(--fg-1);
}
.achika-body h3, .achika-h3 {
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--fg-2);
}
.achika-body p, .achika-p {
    font-size: var(--text-base);
    line-height: var(--lh-body);
    color: var(--fg-3);
}
.achika-eyebrow {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--fg-4);
}
.achika-mono, code {
    font-family: var(--font-mono);
    font-size: 0.9em;
}