/**
 * AI Auto Reply for Facebook - Design Tokens
 * Source: exten/mbs-ai-reply/options/options.css + brand spec
 *
 * Usage: import this file and use the CSS custom properties.
 * Fonts: Bricolage Grotesque (display) + Public Sans (body), self-hosted, @font-face in site.css.
 */


/* ─── Brand Colors ─────────────────────────────────────────────── */
:root {
  /* Primary - Deep Meta Blue */
  --color-primary:              #00425e;
  --color-primary-hover:        #00567a;
  --color-primary-active:       #003349;
  --color-primary-container:    #00567a;
  --color-primary-fixed:        #ddf2ec;  /* light tint - nav pill, tags */
  --color-on-primary:           #ffffff;
  --color-on-primary-fixed:     #0e2630;

  /* Secondary - Teal / Success */
  --color-secondary:            #00425e;
  --color-secondary-container:  #ddf2ec;
  --color-on-secondary:         #ffffff;
  --color-on-secondary-container: #1f5a4e;

  /* Tertiary - AI/Reasoning Purple */
  --color-tertiary:             #00425e;
  --color-tertiary-fixed:       #ddf2ec;
  --color-on-tertiary-fixed:    #0e2630;

  /* Error */
  --color-error:                #ba1a1a;
  --color-error-container:      #ffdad6;
  --color-on-error:             #ffffff;

  /* ─── Surface Tonal Stack ──────────────────────────────────────── */
  --color-surface:              #f6f8f7;  /* canvas / app background */
  --color-surface-lowest:       #ffffff;  /* cards, focused inputs */
  --color-surface-low:          #eef3f1;  /* sidebar, grouped sections */
  --color-surface-container:    #e7eeeb;  /* mid-level containers */
  --color-surface-high:         #e1e9e6;  /* hover tint */
  --color-surface-highest:      #d9e2df;  /* input bg, segment controls */

  /* ─── Text Colors ──────────────────────────────────────────────── */
  --color-on-surface:           #0e2630;  /* primary text */
  --color-on-surface-variant:   #4b5f66;  /* secondary / descriptions */
  --color-outline:              #5c6d74;  /* placeholders, muted */
  --color-outline-variant:      #d3dcda;  /* ghost borders */

  /* ─── Semantic Status Colors ───────────────────────────────────── */
  --color-success-bg:           #dcfce7;
  --color-success-text:         #166534;
  --color-success-border:       #bbf7d0;

  --color-warning-bg:           #fef3c7;
  --color-warning-text:         #92400e;
  --color-warning-border:       #fde68a;

  /* ─── Gradients ────────────────────────────────────────────────── */
  --gradient-cta:               #00425e;
  --gradient-cta-hover:         #00567a;

  /* ─── 2026-10 restyle: one bold accent, used only to mark AI replies ─── */
  --color-highlight:            #ffd43b;
  --color-line:                 #d3dcda;
  --color-ink:                  #0e2630;

  /* ─── Shadows ──────────────────────────────────────────────────── */
  --shadow-ambient:             none;
  --shadow-card:                none;
  --shadow-btn-resting:         none;
  --shadow-btn-hover:           none;
  --shadow-btn-sm:              none;
  --shadow-floating:            0 18px 40px -18px rgba(14, 38, 48, 0.35);

  /* ─── Border Radius ────────────────────────────────────────────── */
  --radius-xs:                  0.25rem;  /* 4px  - micro elements, tags */
  --radius-sm:                  0.5rem;   /* 8px  - inputs, chips */
  --radius-md:                  0.5rem;  /* 12px - buttons, model cards */
  --radius-lg:                  0.625rem;     /* 16px - primary cards */
  --radius-full:                9999px;   /* pills, badges, nav items */

  /* ─── Spacing Scale ────────────────────────────────────────────── */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */

  /* ─── Layout ───────────────────────────────────────────────────── */
  --sidebar-w:                  256px;
  --topbar-h:                   64px;

  /* ─── Typography - Families ────────────────────────────────────── */
  --font-display:               'Bricolage Grotesque', 'Public Sans', sans-serif;
  --font-headline:              'Bricolage Grotesque', 'Public Sans', sans-serif;
  --font-body:                  'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:                  ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── Typography - Scale (fluid sizes) ────────────────────────── */
  --text-xs:      0.6875rem;  /* 11px  - version, overlines */
  --text-sm:      0.8125rem;  /* 13px  - hints, char count, status */
  --text-base:    0.875rem;   /* 14px  - body, descriptions */
  --text-md:      0.9375rem;  /* 15px  - nav items, standard body */
  --text-lg:      1rem;       /* 16px  */
  --text-xl:      1.125rem;   /* 18px  - topbar title */
  --text-2xl:     1.25rem;    /* 20px  - prompt name input */
  --text-3xl:     1.5rem;     /* 24px  - model panel title */
  --text-4xl:     2rem;       /* 32px  - page title */

  /* ─── Typography - Weights ─────────────────────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ─── Typography - Line Heights ────────────────────────────────── */
  --leading-tight:    1.25;
  --leading-snug:     1.35;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* ─── Typography - Letter Spacing ─────────────────────────────── */
  --tracking-tight:   -0.03em;  /* large Manrope headlines */
  --tracking-normal:  -0.01em;  /* medium headings */
  --tracking-wide:    0.02em;   /* badges, small labels */
  --tracking-wider:   0.06em;   /* ALL CAPS overlines */
  --tracking-widest:  0.08em;   /* model group overlines */
}

/* ─── Semantic Typographic Roles ───────────────────────────────── */

/* Heading styles - apply to h1-h6 or any element */
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-on-surface);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.t-headline-lg {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-on-surface);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.t-headline-md {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-primary);
  letter-spacing: var(--tracking-normal);
}

.t-headline-sm {
  font-family: var(--font-headline);
  font-size: calc(var(--text-md) + 0.0625rem); /* ~1.1875rem */
  font-weight: var(--weight-bold);
  color: var(--color-on-surface);
}

.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  color: var(--color-on-surface-variant);
  line-height: var(--leading-normal);
}

.t-body-md {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-on-surface-variant);
  line-height: var(--leading-normal);
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-on-surface-variant);
  line-height: var(--leading-normal);
}

.t-label-lg {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-on-surface);
}

.t-label-md {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-on-surface);
}

.t-label-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-on-surface);
}

.t-overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: 0.05em;
  color: var(--color-on-surface);
}

.t-muted {
  color: var(--color-outline);
}

.t-brand {
  font-family: var(--font-headline);
  color: var(--color-primary);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-normal);
}