/* ============================================================
   Moovpark Family PWA — Design Tokens
   Brand: MoovPark teal (#0F766E) + accent amber (#F8AE18) + red (#E14134).
   (Family palette = TEAL/GREEN — khớp logo Family xanh lá.)
   Layout/typography tokens adapted from the moovpark-teacher-web base.
   ============================================================ */

:root {
  /* ───────────  Typography  ─────────── */
  --font-sans:    "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-ui:      "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", "Ubuntu", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Type scale */
  --fs-display: clamp(2rem, 3vw, 2.55rem);
  --fs-h1:      1.68rem;
  --fs-h2:      1.15rem;
  --fs-h3:      1rem;
  --fs-body:    0.95rem;
  --fs-sm:      0.86rem;
  --fs-xs:      0.78rem;
  --fs-xxs:     0.72rem;

  --lh-tight: 1.08;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ───────────  Brand (MoovPark — Family BLUE)  ─────────── */
  --mp-primary:        #b0d6f7;  /* blue — main CTA, khớp logo Family */
  --mp-primary-anchor: #70aadd;  /* deep blue — hero gradient anchor */
  --mp-primary-dark:   #90c0ea;
  --mp-primary-light:  #d5e9fb;
  --mp-accent:         #F8AE18;  /* amber — secondary */
  --mp-accent-soft:    #FEF3C7;
  --mp-danger:         #E14134;
  --mp-success:        #10B981;

  /* Status / Semantic */
  --color-status-success: #15803D;
  --color-status-warning: #A16207;
  --color-status-danger:  var(--mp-danger);
  --color-status-info:    var(--mp-primary);

  /* ───────────  Surfaces  ─────────── */
  --app-bg:               #FAFBFC;
  --app-page-bg:          #FAFBFC;
  --app-workspace:        #FFFFFF;
  --app-surface:          #FFFFFF;
  --app-surface-soft:     #F1F4F8;
  --app-surface-low:      #EDF2F7;
  --app-surface-lowest:   #FFFFFF;
  --app-surface-elevated: #FFFFFF;

  /* ───────────  Text  ─────────── */
  --app-text:        #0F172A;
  --app-text-soft:   #334155;
  --app-text-muted:  #64748B;
  --app-text-info:    var(--mp-primary);
  --app-text-success: var(--color-status-success);
  --app-text-warning: var(--color-status-warning);
  --app-text-danger:  var(--color-status-danger);

  /* ───────────  Borders / Outlines  ─────────── */
  --app-border:         #E8ECEF;
  --app-outline-ghost:  rgba(15, 28, 44, 0.12);
  --app-border-info:    rgba(176, 214, 247, 0.22);
  --app-border-success: rgba(16, 185, 129, 0.22);
  --app-border-warning: rgba(248, 174, 24, 0.28);
  --app-border-danger:  rgba(225, 65, 52, 0.24);

  /* ───────────  Tonal surfaces (status)  ─────────── */
  --app-surface-info:           rgba(176, 214, 247, 0.10);
  --app-surface-info-strong:    rgba(176, 214, 247, 0.16);
  --app-surface-success:        rgba(16, 185, 129, 0.10);
  --app-surface-success-strong: rgba(16, 185, 129, 0.16);
  --app-surface-warning:        rgba(248, 174, 24, 0.14);
  --app-surface-warning-strong: rgba(248, 174, 24, 0.20);
  --app-surface-danger:         rgba(225, 65, 52, 0.10);
  --app-surface-danger-strong:  rgba(225, 65, 52, 0.16);

  /* ───────────  Shadows / Elevation  ─────────── */
  --app-overlay:        rgba(2, 12, 24, 0.42);
  --app-shadow-ambient: 0 4px 14px rgba(15, 28, 44, 0.04);
  --app-shadow-float:   0 26px 60px -42px rgba(2, 12, 24, 0.28);
  --app-card-shadow:    var(--app-shadow-ambient);
  --shadow-header:      0 14px 36px -30px rgba(2, 12, 24, 0.58);
  --shadow-button-glow: 0 18px 40px -34px rgba(176, 214, 247, 0.45);

  /* ───────────  Radii  ─────────── */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.8rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.2rem;
  --radius-pill: 9999px;

  /* ───────────  Spacing scale  ─────────── */
  --space-0:  0;
  --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;
}

/* Dark theme (html.app-dark) */
html.app-dark, .app-dark {
  --app-bg:               #0B1220;
  --app-page-bg:          #0B1220;
  --app-workspace:        #131A2A;
  --app-surface:          #131A2A;
  --app-surface-soft:     #1B2436;
  --app-surface-low:      #162033;
  --app-surface-lowest:   #101B2C;
  --app-surface-elevated: #1B2436;

  --app-border:        #1F2A40;
  --app-outline-ghost: rgba(148, 163, 184, 0.18);

  --app-text:        #E6EEF8;
  --app-text-soft:   #CBD5E1;
  --app-text-muted:  #8896AE;
  --app-text-info:    #7DD3FC;
  --app-text-success: #86EFAC;
  --app-text-warning: #FCD34D;
  --app-text-danger:  #FDA4AF;

  --app-shadow-ambient: 0 12px 30px rgba(2, 6, 23, 0.36);
  --app-shadow-float:   0 28px 68px -40px rgba(2, 6, 23, 0.82);
}

/* ============================================================
   Semantic base elements
   ============================================================ */
body, .mp-body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--app-bg);
  color: var(--app-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1 { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-semi); letter-spacing: -0.015em; line-height: var(--lh-tight); color: var(--app-text); margin: 0; }
h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--app-text); margin: 0; }
h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--app-text); margin: 0; }
p, span, label, a { font-family: var(--font-body); }

.mp-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--mp-primary) 72%, var(--app-text-muted));
  text-transform: uppercase;
}
.mp-mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

a:focus-visible, button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--mp-primary) 82%, white);
  outline-offset: 2px;
}