/* ============================================================
   Honora Design System — Colors & Type
   ------------------------------------------------------------
   Honora is a Chilean health-tech app that helps medical
   professionals capture procedures, track honorarios, and
   reconcile payments from clinics.

   This file is the single source of truth for color, type,
   spacing, radii, elevation, and motion. Drop it next to your
   HTML and `@import` it, or load with <link rel="stylesheet">.
   ============================================================ */

:root {
  /* ============================================================
     COLOR — Honora has TWO surface modes:
       · onboarding/auth (vivid violet primary)
       · in-app          (teal-cyan primary, the brand "do it" color)
     plus the signature teal→blue gradient on saves.
     ============================================================ */

  /* Brand violet — used for the wordmark, auth flow, step indicators,
     AI/scan iconography. Sampled from the live auth screen (#4A00FF). */
  --color-violet:           #4A00FF;
  --color-violet-50:        #EEE5FF;
  --color-violet-100:       #D9C4FF;
  --color-violet-200:       #B58AFF;
  --color-violet-300:       #8F50FF;
  --color-violet-400:       #6A28FF;
  --color-violet-500:       #4A00FF; /* base */
  --color-violet-600:       #3B00CC;
  --color-violet-700:       #2C0099;
  --color-violet-content:   #FFFFFF;

  /* In-app primary — teal (the "Cobrable" toggle, primary CTAs once
     you're inside the app, active tab). Sampled #289898. */
  --color-teal:             #0FB182;
  --color-teal-50:          #E6F8F1;
  --color-teal-100:         #B8ECD7;
  --color-teal-200:         #7FDDB8;
  --color-teal-300:         #3FC79A;
  --color-teal-400:         #14B189;
  --color-teal-500:         #0FB182; /* base — close to sampled #289898 reading */
  --color-teal-600:         #0C8A66;
  --color-teal-700:         #086349;
  --color-teal-content:     #FFFFFF;

  /* The signature save-action gradient: teal (left) → cyan → blue (right).
     Sampled from the "Guardar Evento" button in three stops. */
  --gradient-action:        linear-gradient(90deg, #289898 0%, #2898B8 55%, #2273C3 100%);
  --gradient-action-soft:   linear-gradient(90deg, rgba(40,152,152,0.10) 0%, rgba(34,115,195,0.10) 100%);

  /* AI tile gradient — anchored on the brand violet #4A00FF. Used on
     AI/scan action tiles on home ("Escanear Evento", "Cargar Imagen").
     A lighter violet → the brand violet, top-left to bottom-right. */
  --gradient-ai:            linear-gradient(135deg, #6A28FF 0%, #4A00FF 100%);

  /* Money / state semantics — Honora uses straight green for income
     ("Conciliado") and red for outstanding ("Pendiente"). Calibrated
     to feel clinical, not alarmist. */
  --color-money-positive:   #28A868;  /* Conciliado, paid */
  --color-money-positive-bg: #E6F4ED;
  --color-money-negative:   #D82828;  /* Pendiente, overdue */
  --color-money-negative-bg: #FBE7E7;
  --color-money-neutral:    #64748B;

  /* Standard semantic state colors — calmer than default web tropes,
     so they sit comfortably alongside health/financial data. */
  --color-info:             #2273C3;
  --color-info-bg:          #E0F0FB;
  --color-info-content:     #0B3B6E;

  --color-success:          #0FB182;
  --color-success-bg:       #E6F8F1;
  --color-success-content:  #064A36;

  --color-warning:          #E0A82E;
  --color-warning-bg:       #FBF1DC;
  --color-warning-content:  #5C4310;

  --color-error:            #D82828;
  --color-error-bg:         #FBE7E7;
  --color-error-content:    #6E1010;

  /* Neutral surface ladder — cool off-white page, white cards, dark slate
     text. Background sampled directly: #F9FAFB. */
  --color-bg:               #F9FAFB;   /* page */
  --color-surface:          #FFFFFF;   /* cards, tiles */
  --color-surface-alt:      #F3F4F6;   /* inset surfaces (input fills) */
  --color-border:           #E5E7EB;   /* hairline */
  --color-border-strong:    #D1D5DB;

  --color-text:             #0F172A;   /* primary text — dark slate */
  --color-text-muted:       #64748B;   /* secondary, helper, captions */
  --color-text-subtle:      #94A3B8;   /* placeholders, disabled */
  --color-text-inverse:     #FFFFFF;

  /* Backwards-compatible aliases so the rest of the system reads
     daisyUI-style if you prefer. */
  --color-primary:          var(--color-teal);
  --color-primary-content:  var(--color-teal-content);
  --color-secondary:        var(--color-violet);
  --color-secondary-content: var(--color-violet-content);
  --color-accent:           #2273C3;

  --color-base-100:         var(--color-surface);
  --color-base-200:         var(--color-bg);
  --color-base-300:         var(--color-border);
  --color-base-content:     var(--color-text);

  /* ============================================================
     TYPOGRAPHY
     ------------------------------------------------------------
     Honora's screens use Inter as their working font (Apple system
     fallbacks). The HONORA wordmark on home uses a heavier weight
     with letter-spacing; the violet "Honora" auth wordmark is the
     same family at extra-bold.
     ============================================================ */
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                  "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                  "Liberation Mono", "Courier New", monospace;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Type scale — slightly larger than web defaults; the app is mobile-first
     and most copy is read at arm's length. */
  --text-xs:    0.75rem;   /* 12 — caption, footnote */
  --text-sm:    0.875rem;  /* 14 — secondary text, helper */
  --text-base:  1rem;      /* 16 — body, input value */
  --text-lg:    1.125rem;  /* 18 — list-item titles */
  --text-xl:    1.25rem;   /* 20 — card title */
  --text-2xl:   1.5rem;    /* 24 — screen heading */
  --text-3xl:   1.875rem;  /* 30 — display */
  --text-4xl:   2.25rem;   /* 36 */
  --text-5xl:   3rem;      /* 48 — splash wordmark */

  /* Weight ladder — Inter shipped */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Line-heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.14em;  /* "HONORA" home wordmark */
  --tracking-widest: 0.18em;  /* tiny kickers: REGISTRAR EVENTO */

  /* ============================================================
     SPACING — 4px base scale
     ============================================================ */
  --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;

  /* ============================================================
     RADII — Honora is generous with corners. Cards are ~16-20px,
     buttons ~12px, inputs ~10-12px, tile icons ~14px.
     ============================================================ */
  --radius-sm:   0.5rem;   /* 8  — badge, kbd */
  --radius-md:   0.75rem;  /* 12 — button, input */
  --radius-lg:   1rem;     /* 16 — card, modal */
  --radius-xl:   1.25rem;  /* 20 — hero card, sheet */
  --radius-full: 9999px;

  /* ============================================================
     ELEVATION — soft, low, never showy. Honora prefers a subtle
     blue-tinted shadow + a hairline border for cards.
     ============================================================ */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 6px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 0 rgba(15, 23, 42, 0.03);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-med:     220ms;
  --dur-slow:    400ms;
}

/* ============================================================
   DARK THEME — opt-in via <html data-theme="dark"> (preferred) or
   automatically via prefers-color-scheme when data-theme="auto".
   The brand identity holds: violet stays violet, teal stays teal,
   money stays green/red. Only neutrals and tints shift.
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  /* Neutral ladder — deep slate, never pure black. */
  --color-bg:               #0B0F1A;
  --color-surface:          #161B26;
  --color-surface-alt:      #1F2532;
  --color-border:           #2A3142;
  --color-border-strong:    #3A4356;

  --color-text:             #F8FAFC;
  --color-text-muted:       #94A3B8;
  --color-text-subtle:      #64748B;
  --color-text-inverse:     #0F172A;

  /* Brand violet — a notch lighter on dark so it doesn't muddy. */
  --color-violet:           #6A28FF;
  --color-violet-50:        #1F0A4A;
  --color-violet-100:       #2C0F66;
  --color-violet-content:   #FFFFFF;

  /* In-app teal — a touch brighter on dark. */
  --color-teal:             #1FD9A0;
  --color-teal-50:          #0A2A22;
  --color-teal-100:         #0E3D31;
  --color-teal-content:     #052017;

  /* Action gradient — anchors shifted toward brighter cyan/blue on
     dark so it still reads as a gradient at lower contrast. */
  --gradient-action:        linear-gradient(90deg, #1FB39B 0%, #2BB1D1 55%, #3994E8 100%);

  /* AI gradient — still violet, just lighter at the top-left. */
  --gradient-ai:            linear-gradient(135deg, #8F50FF 0%, #4A00FF 100%);

  /* Money — brighter on dark; same semantics. */
  --color-money-positive:   #4ADE80;
  --color-money-positive-bg:#0F2A1B;
  --color-money-negative:   #F87171;
  --color-money-negative-bg:#2B0E0E;

  /* Semantic tints invert (dark bg, lighter content). */
  --color-info-bg:          #0E2438;
  --color-info-content:     #BFDBFE;
  --color-success-bg:       #0E2A1F;
  --color-success-content:  #A7F3D0;
  --color-warning-bg:       #2B1F0A;
  --color-warning-content:  #FCD34D;
  --color-error-bg:         #2B0E0E;
  --color-error-content:    #FCA5A5;

  /* Shadows — go larger & darker; no border tint to lean on. */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 4px 6px -2px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.40);
}

/* Follow OS preference when explicitly opted-in via data-theme="auto". */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --color-bg:               #0B0F1A;
    --color-surface:          #161B26;
    --color-surface-alt:      #1F2532;
    --color-border:           #2A3142;
    --color-border-strong:    #3A4356;
    --color-text:             #F8FAFC;
    --color-text-muted:       #94A3B8;
    --color-text-subtle:      #64748B;
    --color-violet:           #6A28FF;
    --color-teal:             #1FD9A0;
    --gradient-action:        linear-gradient(90deg, #1FB39B 0%, #2BB1D1 55%, #3994E8 100%);
    --gradient-ai:            linear-gradient(135deg, #8F50FF 0%, #4A00FF 100%);
    --color-money-positive:   #4ADE80;
    --color-money-negative:   #F87171;
  }
}

/* ============================================================
   Element defaults
   ============================================================ */
html { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); }
body { font-size: var(--text-base); line-height: var(--lh-normal); margin: 0; }

h1, .h1 { font-size: var(--text-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0; }
h2, .h2 { font-size: var(--text-xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); margin: 0; }
h3, .h3 { font-size: var(--text-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: 0; }
p  { margin: 0; line-height: var(--lh-relaxed); }
small, .text-sm { font-size: var(--text-sm); }

/* The "HONORA" home-screen wordmark — dark slate, slight tracking. */
.wordmark-home {
  font-weight: var(--fw-extrabold);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text);
}
/* The violet "Honora" auth wordmark. */
.wordmark-brand {
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-violet);
}
/* Tiny uppercase kicker labels — "REGISTRAR EVENTO", etc. */
.kicker {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

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