/* =====================================================================
   IJSSS theme - design tokens
   plugins/themes/ijsss/styles/tokens.css

   The ONLY file in this theme that holds raw values. Everything in
   theme.css is expressed through these custom properties, so a rebrand
   is a change here and nowhere else.

   Sizes match the approved mockup exactly.

   NO clamp() HERE - ON PURPOSE.
   The scale was originally fluid, but the mockup is built on a 16px root
   while the OJS parent sets html to 14px, so every rem-derived value came
   out ~12.5% small and the clamps compounded it on narrow screens. The fix
   was to restore the root font on the public frontend only
   (`html:has(> body.ijsss) { font-size: 100% }` in theme.css, section 1)
   and to use the mockup's fixed rem values here. Do not reintroduce clamp()
   without re-measuring against the mockup - see ojs-theme/README.md.
   ===================================================================== */

:root {

  /* --- Brand -------------------------------------------------------- */
  --ijsss-navy:        #003265;   /* logo navy - primary                */
  --ijsss-orange:      #F16A10;   /* logo orange - accent               */

  --ijsss-navy-900:    #001B37;
  --ijsss-navy-800:    #00254B;
  --ijsss-navy-700:    #003265;
  --ijsss-navy-600:    #2D5680;
  --ijsss-navy-500:    #59799A;
  --ijsss-navy-100:    #E5EAEF;
  --ijsss-navy-050:    #F2F4F7;

  --ijsss-orange-500:  #F16A10;   /* 3.08:1 - decoration, buttons       */
  --ijsss-orange-600:  #D85F0E;   /* 3.77:1 - button hover              */
  --ijsss-orange-700:  #B44F0C;   /* 5.17:1 - SAFE for text links       */
  --ijsss-orange-800:  #903F09;   /* 7.24:1 - SAFE everywhere           */
  --ijsss-orange-050:  #FEF3EB;

  /* --- Neutrals ------------------------------------------------------ */
  --ijsss-ink:         #1A1D21;
  --ijsss-ink-soft:    #4A5057;
  --ijsss-ink-faint:   #6E757C;
  --ijsss-rule:        #D8DDE3;
  --ijsss-rule-soft:   #EAEEF2;
  --ijsss-bg:          #FFFFFF;
  --ijsss-bg-soft:     #F7F9FB;

  /* --- Status -------------------------------------------------------- */
  --ijsss-ok:          #1E6B41;
  --ijsss-warn-bg:     #FEF3EB;

  /* --- Typography ---------------------------------------------------- */
  /* Noto Sans is what the OJS default theme already loads, so the theme
     adds no webfont request of its own. */
  --ijsss-font-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Roboto, "Helvetica Neue", Arial, sans-serif;
  --ijsss-font-head: var(--ijsss-font-body);

  /* Mockup typography; readable fixed rem sizes at every viewport. */
  --ijsss-fs-xs: 0.8125rem;
  --ijsss-fs-sm: 0.875rem;
  --ijsss-fs-base: 1rem;
  --ijsss-fs-md: 1.125rem;
  --ijsss-fs-lg: 1.375rem;
  --ijsss-fs-xl: 1.75rem;
  --ijsss-fs-2xl: 2.25rem;

  --ijsss-lh-tight: 1.25;
  --ijsss-lh-base:  1.65;

  /* --- Mockup spacing scale ---------------------------------------- */
  --ijsss-s-1: 0.25rem;
  --ijsss-s-2: 0.5rem;
  --ijsss-s-3: 0.75rem;
  --ijsss-s-4: 1rem;
  --ijsss-s-5: 1.5rem;
  --ijsss-s-6: 2rem;
  --ijsss-s-7: 3rem;
  --ijsss-s-8: 4rem;

  /* --- Layout -------------------------------------------------------- */
  --ijsss-container: 1180px;
  --ijsss-gutter:    var(--ijsss-s-5);
  --ijsss-radius:    3px;    /* deliberately small - a reference work,
                                not a consumer app */
  --ijsss-shadow:    0 1px 3px rgba(0, 32, 80, .10);

  /* Breakpoints used in theme.css:
       992px  nav collapses, sidebar drops below content
              (992 is the PARENT theme's breakpoint - reused on purpose;
               two systems fighting over one element is how layout bugs
               happen)
       900px  footer grid 4 -> 2 columns
       700px  hero heading and padding step down, button row stacks
       600px  card grids and footer go single column
     Sizes are fixed rem, so a media query is the only thing that changes
     them. Nothing scales between breakpoints any more. */
}