/* =========================================================================
   suite.css — Louisiana State Police Legal Affairs Suite
   Shared design tokens and base element styles.

   ARCHITECTURE
   ------------
   Tier 1 (palette):   raw color ramps — --navy-*, --gold-*, --gray-*.
                       Private. Tools should NOT reference these directly.
   Tier 2 (semantic):  role-based tokens — --color-primary, --color-text, etc.
                       This is the public API. Tools reference ONLY these.
   Base styles:        element defaults (dialog, button, input, ...) that
                       every page inherits.

   Tool-specific styling (urgency tiers, drop zones, calendars, etc.) lives
   in each tool's own stylesheet and CONSUMES the tokens below — it does not
   belong in this file.
   ========================================================================= */

:root {

    /* ============ N A V Y ============ */

    --navy-50:  #F4F7FC;
    --navy-100: #E7EEF8;
    --navy-200: #CBDCF1;
    --navy-300: #A8C2E8;
    --navy-400: #7FA2DB;
    --navy-500: #5C84CC;
    --navy-600: #3F69B8;
    --navy-700: #2C569F;
    --navy-800: #214A96;
    --navy-900: #184589;   /* Brand navy */
    --navy-950: #091D3C;

    /* ============ G O L D ============ */

    --gold-50:  #FCFAF2;
    --gold-100: #F8F3E2;
    --gold-200: #F0E4BD;
    --gold-300: #E5D18F;
    --gold-400: #D5BE6F;   /* Brand gold */
    --gold-500: #C4AA46;
    --gold-600: #A38B34;
    --gold-700: #846F29;
    --gold-800: #67561F;
    --gold-900: #584A18;
    --gold-950: #372D0D;

    /* =========== G R A Y S =========== */

    --gray-50:  #FAFAF9;
    --gray-100: #F5F4F1;
    --gray-200: #E9E6DF;
    --gray-300: #D8D3C9;
    --gray-400: #B6B0A3;
    --gray-500: #8A8478;
    --gray-600: #666055;
    --gray-700: #474239;
    --gray-800: #2E2B26;
    --gray-900: #1C1A18;
    --gray-950: #0F0E0D;

    --white: #FFFFFF;
    --black: #000000;

    /* ======== S U R F A C E S ======== */

    --color-bg:               #FCFBF8;
    --color-bg-alt:           #F6F4EF;
    --color-bg-muted:         #ECE8DF;

    --color-surface:          var(--white);
    --color-surface-raised:   var(--white);
    --color-surface-hover:    #F7F6F2;
    --color-surface-active:   #EFECE5;

    /* ============ T E X T ============ */

    --color-text:             var(--gray-900);
    --color-text-muted:       #5B554B;
    --color-text-subtle:      #7A746A;
    --color-text-disabled:    #A9A39A;
    --color-text-inverse:     var(--white);

    --color-heading:          var(--navy-900);

    /* =========== L I N K S =========== */

    --color-link:             var(--navy-900);
    --color-link-hover:       var(--navy-700);
    --color-link-active:      var(--navy-950);
    --color-link-visited:     #5A4D8C;

    /* ========= B O R D E R S ========= */

    --color-border-light:     #E6E2D9;
    --color-border:           #D2CCC0;
    --color-border-strong:    #A9A091;

    /* ========== I N P U T S ========== */

    --color-input-bg:         var(--white);
    --color-input-border:     #CFC8BB;
    --color-input-hover:      #B6AEA0;
    --color-input-focus:      var(--navy-900);
    --color-input-disabled:   #F1EFEA;

    /* =========== F O C U S =========== */

    --color-focus-ring:       var(--navy-600);
    --color-focus-ring-soft:  rgb(24 69 137 / 20%);

    /* ========= B U T T O N S ========= */

    --color-primary:          var(--navy-900);
    --color-primary-hover:    var(--navy-800);
    --color-primary-active:   var(--navy-950);
    --color-primary-text:     var(--white);

    --color-secondary:        var(--gold-400);
    --color-secondary-hover:  var(--gold-500);
    --color-secondary-active: var(--gold-600);
    --color-secondary-text:   #2B2410;

    /*========== S T A T U S ==========*/
  
    --color-okay:             #2E7D32;
    --color-okay-hover:       #8EBA90;
    --color-okay-bg:          #EDF7EE;
  
    --color-warning:          #A86A00;
    --color-warning-hover:    #D4B173;
    --color-warning-bg:       #FFF8E6;
  
    --color-danger:           #B42318;
    --color-danger-hover:     #D98B85;
    --color-danger-bg:        #FEF3F2;
  
    --color-info:             var(--navy-900);
    --color-info-bg:          #EEF4FC;

    /* ======= S E L E C T I O N ======= */

    --color-selection-bg:     #DCE8F8;
    --color-selection-text:   var(--navy-950);

    /* ========= S H A D O W S ========= */

    --shadow-color: rgb(16 24 40);

    /* ====== T Y P O G R A P H Y ====== */

    --font-serif:
        "Century Schoolbook",
        Georgia,
        Cambria,
        "Times New Roman",
        serif;

    --font-sans:
        system-ui,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-mono:
        ui-monospace,
        "Cascadia Code",
        Consolas,
        "SF Mono",
        Menlo,
        monospace;

    --font-heading: var(--font-serif);
    --font-body:    var(--font-sans);
    --font-ui:      var(--font-sans);
    --font-code:    var(--font-mono);

    --font-weight-light:    300;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  1.875rem;  /* 30px */
    --text-4xl:  2.25rem;   /* 36px */
    --text-5xl:  3rem;      /* 48px */

    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

    --tracking-tight:  -0.03em;
    --tracking-normal: 0;
    --tracking-wide:   0.03em;
    --tracking-wider:  0.08em;

    --space-0:  0;
    --space-1:  0.25rem;    /* 4 */
    --space-2:  0.5rem;     /* 8 */
    --space-3:  0.75rem;    /* 12 */
    --space-4:  1rem;       /* 16 */
    --space-5:  1.25rem;    /* 20 */
    --space-6:  1.5rem;     /* 24 */
    --space-8:  2rem;       /* 32 */
    --space-10: 2.5rem;     /* 40 */
    --space-12: 3rem;       /* 48 */
    --space-16: 4rem;       /* 64 */
    --space-20: 5rem;       /* 80 */
    --space-24: 6rem;       /* 96 */

    --radius-none: 0;
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-full: 9999px;

    --border-thin:   1px;
    --border-medium: 2px;
    --border-thick:  3px;

    --shadow-xs:
        0 1px 2px rgb(from var(--shadow-color) r g b / 6%);
    --shadow-sm:
        0 2px 4px rgb(from var(--shadow-color) r g b / 8%);
    --shadow-md:
        0 6px 12px rgb(from var(--shadow-color) r g b / 10%);
    --shadow-lg:
        0 12px 24px rgb(from var(--shadow-color) r g b / 12%);
    --shadow-xl:
        0 20px 40px rgb(from var(--shadow-color) r g b / 14%);

    --content-xs:  32rem;
    --content-sm:  40rem;
    --content-md:  48rem;
    --content-lg:  64rem;
    --content-xl:  80rem;
    --content-2xl: 90rem;
}


/* =========================================================================
   BASE ELEMENT STYLES
   ========================================================================= */

/* ---- Selection ---------------------------------------------------------- */

::selection {
    background: var(--color-selection-bg);
    color: var(--color-selection-text);
}

/* ---- Dialog / modal ----------------------------------------------------- *
 * Native <dialog>. Opened with dialog.showModal(), closed with .close().
 * The browser supplies the backdrop (::backdrop) and centers the box via
 * margin:auto — do not add positioning here or you will fight the centering.
 * -------------------------------------------------------------------------- */

dialog {
    background: var(--color-bg);
    padding: var(--space-6);
    max-width: var(--content-md);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
}

dialog::backdrop {
    background-color: rgb(from var(--shadow-color) r g b / 40%);
    cursor: default;
}


/* ---- Buttons ------------------------------------------------------------ *
 * Bare <button> defaults to the primary (filled navy) style. Variants are
 * element-qualified overrides (button.btn-secondary / button.btn-ghost) so
 * they outrank the base regardless of source order.
 *
 * Interaction model:
 *   hover  — fill darkens, gold dotted underline hints
 *   active — fill darkens further, gold outline ring
 *   focus  — navy outline ring (keyboard only, via :focus-visible)
 * Outline (not border) is used for rings so there is zero layout shift.
 * -------------------------------------------------------------------------- */
 
button {
    background: var(--color-primary);
    border: var(--border-thin) solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-primary-text);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-2);
    text-decoration: none;
    transition:
        background 150ms,
        color 150ms;
}
 
button:hover {
    background: var(--color-primary-hover);
    text-decoration: underline dotted var(--color-secondary);
}
 
button:active {
    background: var(--color-primary-active);
    outline: var(--border-medium) solid var(--color-secondary-active);
    outline-offset: 2px;
    text-decoration: underline var(--color-secondary-active);
}
 
button:focus-visible {
    outline: var(--border-thick) solid var(--color-focus-ring);
    outline-offset: 2px;
}
 
button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
 
/* Secondary — navy outline, fills faintly on hover */
button.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
 
button.btn-secondary:hover {
    background: var(--navy-100);
    text-decoration: none;
}
 
/* Ghost — quiet, muted resting text; gold arrives on hover as text + wash */
button.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
}
 
button.btn-ghost:hover {
    background: var(--color-surface-hover);
    color: var(--gold-700);
    text-decoration: none;
}
 
 
/* ---- Form inputs -------------------------------------------------------- *
 * Text-like fields only — an explicit allowlist of types, never bare
 * `input` (which would also hit checkboxes, radios, ranges, etc.). textarea
 * and select are included; both are text-entry surfaces in this suite.
 *
 * Like buttons, inputs do NOT inherit font-family or font-size, so both are
 * set explicitly. Focus uses outline (not border) for zero layout shift.
 * -------------------------------------------------------------------------- */
 
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="password"],
input[type="date"],
textarea,
select {
    width: 100%;
    max-width: var(--content-md);
    background: var(--color-input-bg);
    border: var(--border-thin) solid var(--color-input-border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    padding: var(--space-3);
    transition: border-color 150ms;
}
 
input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover {
    border-color: var(--color-input-hover);
}
 
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-input-focus);
    outline: var(--border-medium) solid var(--color-focus-ring);
    outline-offset: 2px;
}
 
input::placeholder,
textarea::placeholder {
    color: var(--color-text-subtle);
}
 
input:disabled,
textarea:disabled,
select:disabled {
    background: var(--color-input-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}
 
/* textarea-specific: allow vertical resize only, sensible min height */
textarea {
    min-height: calc(var(--space-16) + var(--space-4));
    resize: vertical;
}