/* THBC Practice Hub — design tokens.
   Source: Design/brand-tokens.md (extracted from the Vision & Storyboard brief).
   Hand-written CSS, no build step. Edit values here, not in app.css. */

:root {
    /* Brand */
    --green-900: #173E34;
    --green-800: #2E3732;
    --green-700: #355D50;
    --green-600: #4F7A6B;
    --green-100: #EEF4F0;
    --green-50:  #F3F7F4;

    --terracotta:      #C96F5D;
    --terracotta-dark: #9E3A38;
    --terracotta-50:   #FAF1ED;

    --amber-50: #FFF4E8;
    --amber:    #E39A3B;

    /* Neutrals */
    --ink:        #1F2A26;
    --ink-soft:   #2E3732;
    --grey-700:   #4B554F;
    --grey-600:   #6E6E6E;
    --grey-500:   #777777;
    --grey-400:   #A3ABA6;
    --grey-300:   #CDD5D0;
    --grey-200:   #E3E8E4;
    --grey-100:   #EEF1EF;
    --surface:    #F5F7F5;
    --white:      #FFFFFF;

    /* Semantic */
    --color-bg:            var(--surface);
    --color-surface:       var(--white);
    --color-surface-tint:  var(--green-100);
    --color-surface-warm:  var(--terracotta-50);
    --color-surface-info:  var(--amber-50);
    --color-text:          var(--ink);
    --color-text-muted:    var(--grey-600);
    --color-text-subtle:   var(--grey-500);
    --color-border:        var(--grey-200);
    --color-border-strong: var(--grey-300);
    --color-primary:       var(--green-900);
    --color-primary-hover: var(--green-700);
    --color-on-primary:    var(--white);
    --color-accent:        var(--terracotta);
    --color-accent-hover:  var(--terracotta-dark);
    --color-success:       #2F7D5B;
    --color-warning:       var(--amber);
    --color-danger:        var(--terracotta-dark);
    --color-focus:         #5B9C86;

    /* Type */
    --font-sans: "Aptos", "Segoe UI Variable", "Segoe UI", -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-script: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;
    --font-mono: ui-monospace, "Cascadia Mono", "Courier New", Courier, monospace;

    --text-xs: 0.75rem;   /* 12 */
    --text-sm: 0.875rem;  /* 14 */
    --text-md: 1rem;      /* 16 */
    --text-lg: 1.125rem;  /* 18 */
    --text-xl: 1.25rem;   /* 20 */
    --text-2xl: 1.5rem;   /* 24 */
    --text-3xl: 2rem;     /* 32 */
    --text-4xl: 2.5rem;   /* 40 */

    --leading-tight: 1.2;
    --leading-body: 1.55;

    /* Space (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Shape */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(23, 62, 52, 0.06);
    --shadow-md: 0 4px 16px rgba(23, 62, 52, 0.08);
    --shadow-lg: 0 12px 32px rgba(23, 62, 52, 0.12);

    /* Layout */
    --container: 72rem;
    --container-narrow: 46rem;
    --topbar-height: 3.75rem;
    --sidebar-width: 15rem;

    --transition: 160ms ease;
}