/* ===================================================================
   Crestly · Design Tokens
   ===================================================================
   Single source of truth for the entire app's visual language.
   Every page imports this. Never hardcode brand colors elsewhere.

   Brand: Midnight (#1E1B4B) + Champagne (#C09553)
   Fonts: Manrope (English) + Mukta (Devanagari)

   Last updated: 2026-05  ·  Phase 1.5 redesign
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Mukta:wght@400;500;600;700&display=swap');

:root {
    /* ─── Brand · Primary (Midnight) ──────────────────────────── */
    --crestly-primary:        #1E1B4B;   /* Brand midnight */
    --crestly-primary-deep:   #0C0A2E;   /* Headings, max contrast text */
    --crestly-primary-soft:   rgba(30, 27, 75, 0.06);   /* Hover bg, subtle fills */
    --crestly-primary-line:   rgba(30, 27, 75, 0.12);   /* Subtle borders */

    /* ─── Brand · Accent (Champagne) ──────────────────────────── */
    --crestly-accent:         #C09553;   /* CTAs accent, highlights */
    --crestly-accent-deep:    #92722E;   /* Accent text on cream */
    --crestly-accent-soft:    rgba(192, 149, 83, 0.12);
    --crestly-accent-line:    rgba(192, 149, 83, 0.35);

    /* ─── Surfaces ────────────────────────────────────────────── */
    --crestly-bg:             #FAFAF9;   /* Page background (off-white) */
    --crestly-surface:        #FFFFFF;   /* Cards, inputs */
    --crestly-surface-muted:  #F5F5F4;   /* Disabled, subtle panels */
    --crestly-surface-cream:  #FEFCF5;   /* Warm decorative panel bg */

    /* ─── Borders ─────────────────────────────────────────────── */
    --crestly-border:         #E7E5E4;   /* Default 1px */
    --crestly-border-strong:  #D6D3D1;   /* Hover, emphasized */
    --crestly-border-hairline: rgba(28, 25, 23, 0.06);  /* Ultra-thin */

    /* ─── Text ────────────────────────────────────────────────── */
    --crestly-text:           #0C0A2E;   /* Primary body & headings */
    --crestly-text-muted:     #57534E;   /* Secondary text, labels */
    --crestly-text-soft:      #78716C;   /* Tertiary, captions, hints */
    --crestly-text-inverse:   #FAFAF9;   /* Text on dark surfaces */
    --crestly-text-on-accent: #FFFFFF;   /* Text on champagne fills */

    /* ─── Semantic · States ───────────────────────────────────── */
    --crestly-success:        #15803D;
    --crestly-success-soft:   #DCFCE7;
    --crestly-success-line:   #86EFAC;

    --crestly-danger:         #B91C1C;
    --crestly-danger-soft:    #FEE2E2;
    --crestly-danger-line:    #FCA5A5;

    --crestly-warning:        #B45309;
    --crestly-warning-soft:   #FEF3C7;
    --crestly-warning-line:   #FCD34D;

    --crestly-info:           #1D4ED8;
    --crestly-info-soft:      #DBEAFE;
    --crestly-info-line:      #93C5FD;

    /* ─── Typography ──────────────────────────────────────────── */
    --crestly-font:           'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --crestly-font-hindi:     'Mukta', 'Manrope', system-ui, sans-serif;
    --crestly-font-mono:      'SF Mono', Menlo, Consolas, monospace;

    /* Font sizes — fluid where it helps, fixed where critical for tables */
    --crestly-fs-xs:          11px;
    --crestly-fs-sm:          12px;
    --crestly-fs-base:        14px;
    --crestly-fs-md:          15px;
    --crestly-fs-lg:          17px;
    --crestly-fs-xl:          20px;
    --crestly-fs-2xl:         24px;
    --crestly-fs-3xl:         clamp(24px, 4vw, 32px);

    /* ─── Spacing scale (4px base) ────────────────────────────── */
    --crestly-sp-1:           4px;
    --crestly-sp-2:           8px;
    --crestly-sp-3:           12px;
    --crestly-sp-4:           16px;
    --crestly-sp-5:           20px;
    --crestly-sp-6:           24px;
    --crestly-sp-8:           32px;
    --crestly-sp-10:          40px;
    --crestly-sp-12:          48px;

    /* ─── Radii ───────────────────────────────────────────────── */
    --crestly-r-sm:           6px;
    --crestly-r-md:           10px;
    --crestly-r-lg:           14px;
    --crestly-r-xl:           20px;
    --crestly-r-pill:         999px;

    /* ─── Shadows · used sparingly, refined only ─────────────── */
    --crestly-sh-sm:          0 1px 2px rgba(12, 10, 46, 0.04);
    --crestly-sh-md:          0 4px 12px rgba(12, 10, 46, 0.06);
    --crestly-sh-lg:          0 12px 28px rgba(12, 10, 46, 0.08);
    --crestly-sh-focus:       0 0 0 3px rgba(192, 149, 83, 0.25);

    /* ─── Transitions ─────────────────────────────────────────── */
    --crestly-tx-fast:        0.12s cubic-bezier(0.2, 0, 0.2, 1);
    --crestly-tx:             0.2s cubic-bezier(0.2, 0, 0.2, 1);
    --crestly-tx-slow:        0.4s cubic-bezier(0.2, 0, 0.2, 1);

    /* ─── Layout ──────────────────────────────────────────────── */
    --crestly-content-width:  1200px;
    --crestly-sidebar-width:  264px;
    --crestly-header-height:  64px;
}

/* ===================================================================
   Reset · minimal, intentional
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    font-family: var(--crestly-font);
    font-size: var(--crestly-fs-base);
    line-height: 1.55;
    color: var(--crestly-text);
    background: var(--crestly-bg);
}

/* Hindi script gets the right font automatically */
[lang="hi"], .hindi { font-family: var(--crestly-font-hindi); }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--crestly-primary); text-decoration: none; }
a:hover { color: var(--crestly-accent-deep); }

/* ===================================================================
   Typography utilities
   =================================================================== */

.crestly-h1 { font-size: var(--crestly-fs-3xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--crestly-primary-deep); margin: 0; }
.crestly-h2 { font-size: var(--crestly-fs-2xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--crestly-primary-deep); margin: 0; }
.crestly-h3 { font-size: var(--crestly-fs-xl); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--crestly-primary-deep); margin: 0; }
.crestly-h4 { font-size: var(--crestly-fs-lg); font-weight: 500; line-height: 1.35; color: var(--crestly-primary-deep); margin: 0; }

.crestly-text-muted { color: var(--crestly-text-muted); }
.crestly-text-soft  { color: var(--crestly-text-soft); }

.crestly-eyebrow {
    font-size: var(--crestly-fs-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--crestly-text-soft);
}

/* ===================================================================
   Buttons
   =================================================================== */

.crestly-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--crestly-sp-2);
    padding: 11px 18px;
    border-radius: var(--crestly-r-md);
    font-family: inherit;
    font-size: var(--crestly-fs-base);
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--crestly-tx), border-color var(--crestly-tx), color var(--crestly-tx), transform var(--crestly-tx-fast);
    white-space: nowrap;
    text-decoration: none;
    min-height: 44px;  /* mobile-friendly tap target */
}
.crestly-btn:active { transform: translateY(1px); }
.crestly-btn:focus-visible { outline: none; box-shadow: var(--crestly-sh-focus); }
.crestly-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Primary — midnight fill */
.crestly-btn--primary {
    background: var(--crestly-primary);
    color: var(--crestly-text-inverse);
    border-color: var(--crestly-primary);
}
.crestly-btn--primary:hover { background: var(--crestly-primary-deep); border-color: var(--crestly-primary-deep); }

/* Accent — champagne fill (use sparingly, for celebration moments) */
.crestly-btn--accent {
    background: var(--crestly-accent);
    color: var(--crestly-text-on-accent);
    border-color: var(--crestly-accent);
}
.crestly-btn--accent:hover { background: var(--crestly-accent-deep); border-color: var(--crestly-accent-deep); }

/* Outline — for secondary actions */
.crestly-btn--outline {
    background: transparent;
    color: var(--crestly-primary);
    border-color: var(--crestly-border-strong);
}
.crestly-btn--outline:hover {
    background: var(--crestly-primary-soft);
    border-color: var(--crestly-primary);
}

/* Ghost — no border, minimal */
.crestly-btn--ghost {
    background: transparent;
    color: var(--crestly-text-muted);
    border-color: transparent;
}
.crestly-btn--ghost:hover { background: var(--crestly-surface-muted); color: var(--crestly-text); }

/* Danger */
.crestly-btn--danger {
    background: var(--crestly-danger);
    color: white;
    border-color: var(--crestly-danger);
}
.crestly-btn--danger:hover { background: #991B1B; border-color: #991B1B; }

/* Sizes */
.crestly-btn--sm { padding: 7px 12px; font-size: var(--crestly-fs-sm); min-height: 34px; }
.crestly-btn--lg { padding: 14px 22px; font-size: var(--crestly-fs-md); min-height: 50px; }
.crestly-btn--block { width: 100%; }

/* ===================================================================
   Inputs · clean, generous, touch-friendly
   =================================================================== */

.crestly-field { display: block; margin-bottom: var(--crestly-sp-4); }

.crestly-label {
    display: block;
    font-size: var(--crestly-fs-sm);
    font-weight: 500;
    color: var(--crestly-text-muted);
    margin-bottom: var(--crestly-sp-2);
    letter-spacing: 0.005em;
}

.crestly-input,
.crestly-select,
.crestly-textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;            /* 16px = no zoom on iOS */
    font-family: inherit;
    color: var(--crestly-text);
    background: var(--crestly-surface);
    border: 1px solid var(--crestly-border);
    border-radius: var(--crestly-r-md);
    transition: border-color var(--crestly-tx-fast), box-shadow var(--crestly-tx-fast);
    min-height: 46px;
    line-height: 1.4;
}
.crestly-input:hover,
.crestly-select:hover,
.crestly-textarea:hover { border-color: var(--crestly-border-strong); }
.crestly-input:focus,
.crestly-select:focus,
.crestly-textarea:focus {
    outline: none;
    border-color: var(--crestly-accent);
    box-shadow: var(--crestly-sh-focus);
}
.crestly-input::placeholder { color: var(--crestly-text-soft); }

/* ===================================================================
   Cards
   =================================================================== */

.crestly-card {
    background: var(--crestly-surface);
    border: 1px solid var(--crestly-border);
    border-radius: var(--crestly-r-lg);
    padding: var(--crestly-sp-6);
}
.crestly-card--flat { border: 1px solid var(--crestly-border-hairline); }
.crestly-card--floating { box-shadow: var(--crestly-sh-md); border-color: transparent; }

/* ===================================================================
   Badges & tags
   =================================================================== */

.crestly-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: var(--crestly-fs-xs);
    font-weight: 500;
    border-radius: var(--crestly-r-sm);
    line-height: 1.3;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.crestly-tag--neutral { background: var(--crestly-surface-muted); color: var(--crestly-text-muted); border-color: var(--crestly-border); }
.crestly-tag--success { background: var(--crestly-success-soft); color: var(--crestly-success); border-color: var(--crestly-success-line); }
.crestly-tag--danger  { background: var(--crestly-danger-soft);  color: var(--crestly-danger);  border-color: var(--crestly-danger-line); }
.crestly-tag--warning { background: var(--crestly-warning-soft); color: var(--crestly-warning); border-color: var(--crestly-warning-line); }
.crestly-tag--info    { background: var(--crestly-info-soft);    color: var(--crestly-info);    border-color: var(--crestly-info-line); }
.crestly-tag--accent  { background: var(--crestly-accent-soft);  color: var(--crestly-accent-deep); border-color: var(--crestly-accent-line); }

/* ===================================================================
   Brand wordmark + lockup
   =================================================================== */

.crestly-wordmark {
    font-family: var(--crestly-font);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--crestly-primary-deep);
}

.crestly-tagline {
    font-size: var(--crestly-fs-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--crestly-accent-deep);
}

/* Champagne hairline rule — used as visual signature element */
.crestly-rule {
    height: 1px;
    background: var(--crestly-accent);
    border: 0;
    width: 32px;
    opacity: 0.6;
}

/* ===================================================================
   Subtle background pattern (optional, for hero areas)
   =================================================================== */

.crestly-pattern-dots {
    background-image: radial-gradient(circle at 1px 1px, var(--crestly-primary-line) 1px, transparent 0);
    background-size: 24px 24px;
}

/* ===================================================================
   Utility · invisible-but-accessible
   =================================================================== */

.crestly-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}