/* ══════════════════════════════════════════════════════════════════════════
   TALLAPATRA — SEMANTIC DESIGN TOKENS
   Nijastro Tallapatra Design System v0.3.1 · §3 Design tokens

   THE single source of truth for colour, type, space, radius, border,
   elevation, motion, layout and z-index.

   RULES (§27 Design-to-code contract):
     · No raw hex outside this file. Page and component CSS must reference
       these variables only.
     · Token names are PURPOSE-based (surface.card, action.primary), never
       appearance-based (beigeBox, redButton).
     · Every foreground/background pairing used by the system is verified in
       tools/verify-palette.py. Run it after ANY change here.

   Prefix: --tp-*  (Tallapatra). Legacy --accent-gold/--card-bg/etc. names are
   mapped in compat.css during migration and removed in Phase 5.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* never auto-invert under prefers-color-scheme: dark; dark theme is NOT
       approved for v1 (§26 Theme support). */
    color-scheme: light;

    /* ══════════════════════════════════════════════════════════════════
       1. RAW PALETTE  (SOURCE — design doc Appendix D, from mock CSS)
       Reference swatches only. Product code uses the SEMANTIC tokens below,
       never these.
       ══════════════════════════════════════════════════════════════════ */
    --tp-palette-leaf:      #E7DAB4; /* తాటాకు — palm leaf */
    --tp-palette-leaf-deep: #D8C48F; /* aged leaf edge */
    --tp-palette-card:      #F4ECD2; /* fresh leaf card */
    --tp-palette-ink:       #3A2B16; /* సిరా — iron-gall ink */
    --tp-palette-ink-soft:  #6B5836;
    --tp-palette-kumkum:    #A8232B; /* కుంకుమ */
    --tp-palette-pasupu:    #C08A1E; /* పసుపు — turmeric */

    /* ══════════════════════════════════════════════════════════════════
       2. SURFACE
       ══════════════════════════════════════════════════════════════════ */
    --tp-surface-page:     var(--tp-palette-leaf);
    --tp-surface-card:     var(--tp-palette-card);
    --tp-surface-sunken:   var(--tp-palette-leaf-deep);
    --tp-surface-elevated: var(--tp-palette-card); /* overlays: clean card, no fibre (§15) */
    --tp-surface-inverse:  var(--tp-palette-ink);
    --tp-surface-overlay:  rgba(58, 43, 22, 0.55); /* scrim over ink */

    /* Quiet tint used for user chat bubbles / subtle grouping (§21) */
    --tp-surface-accent-quiet: #EFE3C3;

    /* ══════════════════════════════════════════════════════════════════
       3. TEXT
       Verified: primary/secondary pass 4.5:1 on page, card AND sunken.
       text.muted is page+card only — do not place on sunken (3.97:1).
       ══════════════════════════════════════════════════════════════════ */
    --tp-text-primary:    var(--tp-palette-ink);
    --tp-text-secondary:  #5F4D2E; /* darkened from ink-soft so sunken also passes */
    --tp-text-muted:      var(--tp-palette-ink-soft);
    --tp-text-inverse:    var(--tp-palette-leaf);
    --tp-text-link:       var(--tp-palette-kumkum);
    /* Disabled must stay LEGIBLE (§10) — verified 4.5:1 against the disabled
       background AND against card/leaf, not merely "faded". */
    --tp-text-disabled:   #655637;
    --tp-text-on-action:  #F8EED6; /* on kumkum — 6.19:1 */
    --tp-text-on-accent:  #2E2415; /* on pasupu — 5.00:1 (mock value) */

    /* ══════════════════════════════════════════════════════════════════
       4. BORDER
       ══════════════════════════════════════════════════════════════════ */
    --tp-border-subtle:  1px solid var(--tp-palette-leaf-deep);
    --tp-border-control: 1.5px solid var(--tp-palette-leaf-deep);
    --tp-border-strong:  2px solid var(--tp-palette-ink);
    --tp-border-color-subtle: var(--tp-palette-leaf-deep);
    --tp-border-color-strong: var(--tp-palette-ink);
    --tp-border-color-error:  var(--tp-status-error);
    --tp-border-color-focus:  var(--tp-palette-pasupu);

    /* ══════════════════════════════════════════════════════════════════
       5. ACTION
       ══════════════════════════════════════════════════════════════════ */
    --tp-action-primary:          var(--tp-palette-kumkum);
    --tp-action-primary-hover:    #931F26;
    --tp-action-primary-pressed:  #7E1A20;
    --tp-action-secondary:        transparent; /* border-led secondary button */
    --tp-action-destructive:      var(--tp-status-error);
    --tp-action-disabled-bg:      #DCCFA9;

    /* Explicit button-role aliases — buttons MUST consume these, never
       text-color variables (prevents --indigo → ink colour chain). */
    --tp-action-primary-bg:       var(--tp-palette-kumkum);
    --tp-action-primary-active:   var(--tp-action-primary-pressed);
    --tp-action-primary-text:     var(--tp-text-on-action);
    --tp-action-primary-focus:    var(--tp-focus-ring-color);
    --tp-action-primary-disabled: var(--tp-action-disabled-bg);

    /* ══════════════════════════════════════════════════════════════════
       6. FOCUS  (§16)
       RESOLVED CONFLICT: the doc mandates a 2px pasupu ring (SOURCE §10) but
       ALSO requires focus indicators ≥3:1 vs adjacent colours (§16). Pasupu
       alone is only 2.19:1 on leaf and 2.58:1 on card — the two SOURCE rules
       contradict. §10 anticipates this ("increase contrast/background
       separation if needed").
       Resolution: two-tone ring — pasupu keeps the brand identity, an ink halo
       carries the contrast (9.81:1 on page, 11.56:1 on card; pasupu vs its own
       halo is 4.49:1, so both boundaries pass). See open-decisions register.
       ══════════════════════════════════════════════════════════════════ */
    --tp-focus-ring-color: var(--tp-palette-pasupu);
    --tp-focus-halo-color: var(--tp-palette-ink);
    --tp-focus-ring-width: 2px;
    --tp-focus-ring-offset: 2px;

    /* ══════════════════════════════════════════════════════════════════
       7. STATUS  (§3 marked TBD — resolved here, all values contrast-verified)
       Deliberately NOT the brand accents: kumkum stays "primary action" and
       pasupu stays "selected/thread". Status must never be colour-only (§16),
       so every status component also carries an icon + text label.
       ══════════════════════════════════════════════════════════════════ */
    --tp-status-success: #1F6B3B;
    --tp-status-warning: #6E4707;
    --tp-status-error:   #8C1D18;
    --tp-status-info:    #1E4E79;
    --tp-status-pending: #5B5241;
    --tp-status-offline: #54504A;

    /* Tinted backings — kept close to leaf/card so the page stays Tallapatra */
    --tp-status-success-bg: #E4EDDF;
    --tp-status-warning-bg: #F5E7C8;
    --tp-status-error-bg:   #F5E0DC;
    --tp-status-info-bg:    #E0E7EF;
    --tp-status-pending-bg: #ECE5D6;
    --tp-status-offline-bg: #E8E5DE;

    /* ══════════════════════════════════════════════════════════════════
       8. CHART  (§20)
       ══════════════════════════════════════════════════════════════════ */
    --tp-chart-background:  var(--tp-surface-card);
    --tp-chart-centre:      var(--tp-surface-page);
    --tp-chart-grid:        var(--tp-palette-ink);
    --tp-chart-label:       var(--tp-text-secondary);
    --tp-chart-planet:      var(--tp-text-primary);
    --tp-chart-lagna:       var(--tp-palette-kumkum);
    --tp-chart-selected-bg: #EADFBE;
    --tp-chart-selected-outline: var(--tp-palette-ink);
    --tp-chart-marker-exalted:     var(--tp-status-success);
    --tp-chart-marker-debilitated: var(--tp-status-error);
    --tp-chart-marker-retrograde:  var(--tp-status-info);
    --tp-chart-marker-combust:     var(--tp-status-warning);

    /* ══════════════════════════════════════════════════════════════════
       9. TYPOGRAPHY  (§4)
       ══════════════════════════════════════════════════════════════════ */
    --tp-font-display: "Noto Serif Telugu", "Nirmala UI", "Gautami", serif;
    --tp-font-body:    "Noto Sans Telugu", "Nirmala UI", "Gautami", system-ui, sans-serif;

    /* Mobile-first sizes; desktop values applied at the 1024px breakpoint below.
       Telugu body must never drop under 12.5px in production (§4). */
    --tp-type-display-size: 28px;   --tp-type-display-lh: 38px;
    --tp-type-h1-size:      21px;   --tp-type-h1-lh:      30px;
    --tp-type-h2-size:      18px;   --tp-type-h2-lh:      27px;
    --tp-type-h3-size:      15.5px; --tp-type-h3-lh:      23px;
    --tp-type-body-lg-size: 14.5px; --tp-type-body-lg-lh: 23px;
    --tp-type-body-size:    14px;   --tp-type-body-lh:    23px;
    --tp-type-label-size:   12px;   --tp-type-label-lh:   17px;
    --tp-type-caption-size: 11px;   --tp-type-caption-lh: 16px;

    --tp-weight-regular: 400;
    --tp-weight-medium:  500;
    --tp-weight-semibold: 600;
    --tp-weight-bold:    700;

    /* ══════════════════════════════════════════════════════════════════
       10. SPACING  (§5)
       ══════════════════════════════════════════════════════════════════ */
    --tp-space-1:   4px;
    --tp-space-2:   8px;
    --tp-space-3:   12px;
    --tp-space-4:   16px;
    --tp-space-4-5: 18px;  /* Tallapatra mobile body inset (SOURCE) */
    --tp-space-5:   24px;
    --tp-space-6:   32px;
    --tp-space-8:   48px;
    --tp-space-10:  64px;
    /* component-specific compact gap from the mock; normalize when possible */
    --tp-space-stack: 14px;

    /* ══════════════════════════════════════════════════════════════════
       11. RADIUS  (§11)
       ══════════════════════════════════════════════════════════════════ */
    --tp-radius-xs:   6px;   /* chart container, dense data */
    --tp-radius-sm:   10px;  /* inputs, notices, metadata, dasha */
    --tp-radius-md:   12px;  /* buttons, report cards, consultation */
    --tp-radius-lg:   16px;  /* sheets / large overlay surfaces */
    --tp-radius-pill: 999px; /* tabs, chips, badges */
    --tp-radius-circle: 50%; /* circular icon/status/avatar containers */

    /* ══════════════════════════════════════════════════════════════════
       12. ELEVATION  (§11)
       Tallapatra is flat and border-led. elevation.0 is the default for ALL
       ordinary surfaces. Shadows only for things that genuinely float.
       ══════════════════════════════════════════════════════════════════ */
    --tp-elevation-0: none;
    --tp-elevation-1: 0 2px 6px rgba(58, 43, 22, 0.10);   /* dropdown, sticky */
    --tp-elevation-modal: 0 16px 40px rgba(58, 43, 22, 0.28);

    /* ══════════════════════════════════════════════════════════════════
       13. MOTION  (§13)
       ══════════════════════════════════════════════════════════════════ */
    --tp-motion-instant:  80ms;
    --tp-motion-fast:     140ms;
    --tp-motion-standard: 200ms;
    --tp-motion-slow:     280ms;
    --tp-ease: cubic-bezier(0.2, 0, 0.2, 1);

    /* ══════════════════════════════════════════════════════════════════
       14. LAYOUT  (§6)
       ══════════════════════════════════════════════════════════════════ */
    --tp-layout-max:      1200px; /* normal content ceiling */
    --tp-layout-wide:     1280px;
    --tp-layout-reading:  720px;  /* long report measure (§4) */
    --tp-layout-form:     960px;
    --tp-layout-gutter:   var(--tp-space-4);
    --tp-layout-columns:  12;
    --tp-grid-columns:    1;
    --tp-grid-column-gap: var(--tp-space-4);
    --tp-grid-row-gap:    var(--tp-space-4);
    /* Master-layout aliases (§7.4.1). The main slot itself remains padding:0;
       these values separate the shell regions from one another. */
    --tp-page-padding-block-start: var(--tp-space-4);
    --tp-page-padding-block-end:   var(--tp-space-4);
    --tp-shell-message-gap:        var(--tp-space-3);
    --tp-footer-padding-start:     var(--tp-space-4);
    --tp-footer-padding-end:       var(--tp-space-4);
    --tp-space-title-description:  var(--tp-space-2);
    --tp-space-header-content:     var(--tp-space-4);
    --tp-space-section:            var(--tp-space-4);
    --tp-space-card-content:       var(--tp-space-4);
    --tp-space-field:              var(--tp-space-2);
    --tp-space-field-group:        var(--tp-space-5);
    --tp-space-control-gap:        var(--tp-space-3);
    --tp-space-row:                var(--tp-space-4);
    --tp-space-mobile-gap:         var(--tp-space-3);
    --tp-control-height:           48px;
    --tp-filter-primary-min:       260px;
    --tp-filter-actions-min:       420px;

    /* Safe areas (§23) — the shell and sticky actions respect every edge. */
    --tp-safe-bottom: env(safe-area-inset-bottom, 0px);
    --tp-safe-top:    env(safe-area-inset-top, 0px);
    --tp-safe-left:   env(safe-area-inset-left, 0px);
    --tp-safe-right:  env(safe-area-inset-right, 0px);

    /* Minimum interactive target (§16) */
    --tp-target-min: 44px;

    /* Button Sizing Tokens (§9 - Phase 4.2B Button Refinement) */
    --tp-btn-height-hero:    48px;
    --tp-btn-height-md:      44px;
    --tp-btn-height-sm:      36px;
    --tp-btn-icon-size:      40px;

    --tp-btn-font-size-hero: 1rem;       /* 16px */
    --tp-btn-font-size-md:   0.9375rem;  /* 15px */
    --tp-btn-font-size-sm:   0.875rem;   /* 14px */

    --tp-btn-padding-hero:   var(--tp-space-3) var(--tp-space-6);
    --tp-btn-padding-md:     var(--tp-space-2) var(--tp-space-4);
    --tp-btn-padding-sm:     var(--tp-space-1) var(--tp-space-3);
    --tp-btn-padding-icon:   var(--tp-space-2);

    /* ══════════════════════════════════════════════════════════════════
       15. Z-INDEX  (§11 — "define a z-index scale")
       ══════════════════════════════════════════════════════════════════ */
    --tp-z-base:      0;
    --tp-z-sticky:    100;
    --tp-z-dropdown:  200;
    --tp-z-tooltip:   300;
    --tp-z-drawer:    400;
    --tp-z-modal:     500;
    --tp-z-toast:     600;
    --tp-z-critical:  700;

    /* ══════════════════════════════════════════════════════════════════
       16. PRINT  (§20 — monochrome-safe report/chart output)
       True black/white so charts and legends stay legible on any printer and
       the leaf texture is dropped entirely.
       ══════════════════════════════════════════════════════════════════ */
    --tp-print-paper: #FFFFFF;
    --tp-print-ink:   #000000;

    /* ══════════════════════════════════════════════════════════════════
       17. LEAF FIBRE TEXTURE  (§24 — CSS gradient, no image asset)
       Apply ONLY to major page surfaces. Never on inputs, dialogs, menus,
       tooltips, dense data or nested cards (§11.3).
       ══════════════════════════════════════════════════════════════════ */
    --tp-fibre: repeating-linear-gradient(90deg,
                    rgba(107, 88, 54, 0.05) 0 1px,
                    transparent 1px 7px);
}

/* Desktop type scale (§4). Applied from the desktop breakpoint up. */
@media (min-width: 1024px) {
    :root {
        --tp-type-display-size: 36px;   --tp-type-display-lh: 48px;
        --tp-type-h1-size:      30px;   --tp-type-h1-lh:      40px;
        --tp-type-h2-size:      24px;   --tp-type-h2-lh:      34px;
        --tp-type-h3-size:      19px;   --tp-type-h3-lh:      28px;
        --tp-type-body-lg-size: 16px;   --tp-type-body-lg-lh: 26px;
        --tp-type-body-size:    15px;   --tp-type-body-lh:    24px;
        --tp-type-label-size:   13px;   --tp-type-label-lh:   18px;
        --tp-type-caption-size: 12px;   --tp-type-caption-lh: 18px;
        --tp-layout-gutter:     var(--tp-space-4);
        --tp-grid-columns:      var(--tp-layout-columns);
        --tp-grid-column-gap:   var(--tp-space-4);
        --tp-grid-row-gap:      var(--tp-space-4);
        --tp-page-padding-block-start: var(--tp-space-4);
        --tp-page-padding-block-end:   var(--tp-space-5);
        --tp-shell-message-gap:        var(--tp-space-4);
        --tp-footer-padding-start:     var(--tp-space-6);
        --tp-space-card-content:       var(--tp-space-4);
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    :root {
        --tp-layout-gutter: var(--tp-space-4);
        --tp-grid-columns: 8;
        --tp-grid-column-gap: var(--tp-space-4);
        --tp-grid-row-gap: var(--tp-space-4);
        --tp-page-padding-block-start: var(--tp-space-4);
        --tp-page-padding-block-end:   var(--tp-space-5);
        --tp-shell-message-gap:        var(--tp-space-4);
        --tp-footer-padding-start:     var(--tp-space-6);
        --tp-space-card-content:       var(--tp-space-4);
    }
}

/* Motion is opt-out at the token level, so every consumer inherits it (§13). */
@media (prefers-reduced-motion: reduce) {
    :root {
        --tp-motion-instant:  0ms;
        --tp-motion-fast:     0ms;
        --tp-motion-standard: 0ms;
        --tp-motion-slow:     0ms;
    }
}