/*  Tokens for Robodog GP theme: setting up theme type, color, spacing
    Sami Maununen
    Robodog LLC
    v. 1.1. 8/2025    

1. Colors
    Supports Dark/Light mode and theming
    Light mode color variables set in inc/generatepress.php 

    Base values
        - Static Colors
        - Base Palette 0-1000 (Neutral)
        - Main Colors (Primary, Accent, Warning, Danger, Success)
    Semantic Values
        - Layout
            - Background (*
            - Surface (*
            - Border (*
        - Text 

2. Typography
    Base values
        - Base Font Size 200-900 (Clamp)
        - Hero font values 1000-1300 (Clamp)
    Semantic Values
        - Typography (typography-)

3. Layout and Spacing Controls
    Base values
        - Base Spacing 0-1000 (Clamp)
        - Base Padding
    Semantic Values
        - Content widths
        - Element roundness
*/

/* 1. COLORS */

:root {
    --rd-c-warning: #f68500;
    --rd-c-warning-soft: #ffebc6;
    --rd-c-danger: #f32051;
    --rd-c-danger-soft: #ffd8e1;
    --rd-c-success: #03a01c;
    --rd-c-success-soft: #cefdde;
    /* Functional Text Colors*/
    --rd-c-text-warning:var(--rd-c-warning); 
    --rd-c-text-success:var(--rd-c-success); 
    --rd-c-text-danger:var(--rd-c-danger); 
    --rd-c-link-visited: var(--rd-c-primary-alt);
    /* Forms (Semantic) */
    --rd-form-bg: var(--rd-c-surface-high);
    --rd-form-border:var(--rd-c-border-intense);
    --rd-form-border-focus:var(--rd-c-primary);
    --rd-form-placeholder:var(--rd-base-900);
    /* Overlays and shadows */
    --rd-c-overlay-soft:rgba(0, 0, 0, 0.04);
    --rd-c-shadow: rgba(0, 0, 0, 0.25);
    --rd-shadow-default: 0px 0px 10px 0px  var(--rd-c-shadow);
    --rd-shadow-s: 0px 0px 4px 0px var(--rd-c-shadow);
    --rd-shadow-l: 1px 1px 40px -6px var(--rd-c-shadow);
}

/* Colors for Light mode are set and injected in GP global colors inc/site_specific.php */
/* Additional Light theme color tweaks here */
/*
html.rd-theme--light {
}
*/

html.rd-theme--dark {
    /* Colors for Dark Theme */
    /* Text & surfaces (semantic) */
    --rd-c-text-base: var(--rd-base-900);
    --rd-c-text-secondary: var(--rd-base-600);
    --rd-c-text-muted: var(--rd-base-400);
    --rd-c-text-heading: var(--rd-base-900);
    
    --rd-c-text-link: var(--rd-c-primary-alt);
    --rd-c-text-link-hover:var(--rd-c-primary); 
    --rd-c-link-visited: var(--rd-c-primary-alt);

    --rd-c-bg-base: var(--rd-base-100);
    --rd-c-surface-base: var(--rd-base-200);
    --rd-c-surface-lowest: var(--rd-base-350);
    --rd-c-surface-low: var(--rd-base-300);
    --rd-c-surface-elevated: var(--rd-base-50);
    --rd-c-surface-high: var(--rd-base-0);
    
    --rd-c-warning: #ff6300;
    --rd-c-warning-soft: #682c00;
    --rd-c-danger: #d91240;
    --rd-c-danger-soft: #660018;
    --rd-c-success: #03911b;
    --rd-c-success-soft: #003d11;
    /* Redeclare Text Colors*/
    --rd-c-text-warning:var(--rd-c-warning); 
    --rd-c-text-success:var(--rd-c-success); 
    --rd-c-text-danger:var(--rd-c-danger); 

    /* Brand */
    --rd-c-primary: #c3a684;
    --rd-c-primary-alt:#e4bc80;
    --rd-c-primary-soft:#554d43;
    --rd-c-accent:#7faf94;
    --rd-c-accent-alt: #658372;
    --rd-c-accent-soft: #31463a;

    --rd-c-accent-secondary: #cc86a7;

    /* Borders (semantic) */
    --rd-c-border: var(--rd-base-400); 
    --rd-c-border-intense: var(--rd-base-600); 

    /* Forms (Semantic) */
    --rd-form-bg: var(--rd-c-surface-high);
    --rd-form-border:var(--rd-c-border-intense);
    --rd-form-border-focus:var(--rd-c-primary);
    --rd-form-placeholder:var(--rd-base-900);

    /* Neutral base scale */
    --rd-base-0:#000000;
    --rd-base-50: #0a0c0f;
    --rd-base-100:#121418;
    --rd-base-200: #1a1d22;
    --rd-base-300: #22262b;
    --rd-base-350: #22262b;
    --rd-base-400: #4a4e5a;
    --rd-base-500: #5b616e;
    --rd-base-600: #8e95a2;
    --rd-base-700: #b6bac3;
    --rd-base-800: #d8dbdf;
    --rd-base-900: #eeeef0;
    --rd-base-1000: #fff;

   /* Overlays and shadows */
   --rd-c-overlay-soft:rgba(255, 255, 255, 0.05);
   --rd-c-shadow-color: rgba(255, 255, 255, 0.03);
}

/*
 * Web Fonts from colophon-foundry.org
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Colophon Foundry. The fonts are protected under domestic and international trademark and
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2022 Colophon Foundry
 *
 * Licenced to Sami Maununen Inarin Kasityopuoti
 */

@font-face {
    font-family: 'Apercu';
    src: url('webfonts/apercu-light-pro.woff2') format('woff2'),
         url('webfonts/apercu-light-pro.woff') format('woff');
         font-weight: 300;
         font-style: normal;
         font-display: swap;
}
@font-face {
    font-family: 'Apercu';
    src: url('webfonts/apercu-medium-pro.woff2') format('woff2'),
     url('webfonts/apercu-medium-pro.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Eksell';
    src: url('webfonts/EksellDisplayWeb-Small.woff2') format('woff2'),
	url('webfonts/EksellDisplayWeb-Small.woff') format('woff');

    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pressura';

    src: url('webfonts/GT-Pressura-Mono-Regular.woff2') format('woff2'),
	url('webfonts/GT-Pressura-Mono-Regular.woff') format('woff'),
	url('webfonts/GT-Pressura-Mono-Regular.ttf') format('truetype');

    font-weight: 400;
    font-style: normal;
    font-display: swap;
}



:root {
  /* Layout and Spacing Controls */

  /* Spacing with clamp */
  --rd-space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --rd-space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
  --rd-space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
  --rd-space-s: clamp(1rem, 0.9348rem + 0.3261vw, 1.1875rem);
  --rd-space-m: clamp(1.5rem, 1.3913rem + 0.5435vw, 1.8125rem);
  --rd-space-l: clamp(2rem, 1.8696rem + 0.6522vw, 2.375rem);
  --rd-space-xl: clamp(3rem, 2.8043rem + 0.9783vw, 3.5625rem);
  --rd-space-2xl: clamp(4rem, 3.7391rem + 1.3043vw, 4.75rem);
  --rd-space-3xl: clamp(6rem, 5.6087rem + 1.9565vw, 7.125rem);
  /* One-up pairs */
  --rd-space-3xs-2xs: clamp(0.25rem, 0.1196rem + 0.6522vw, 0.625rem);
  --rd-space-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem);
  --rd-space-xs-s: clamp(0.75rem, 0.5978rem + 0.7609vw, 1.1875rem);
  --rd-space-s-m: clamp(1rem, 0.7174rem + 1.413vw, 1.8125rem);
  --rd-space-m-l: clamp(1.5rem, 1.1957rem + 1.5217vw, 2.375rem);
  --rd-space-l-xl: clamp(2rem, 1.4565rem + 2.7174vw, 3.5625rem);
  --rd-space-xl-2xl: clamp(3rem, 2.3913rem + 3.0435vw, 4.75rem);
  --rd-space-2xl-3xl: clamp(4rem, 2.913rem + 5.4348vw, 7.125rem);
  /* Custom pairs */
  --rd-space-s-l: clamp(1rem, 0.5217rem + 2.3913vw, 2.375rem);
  --rd-space-xl-3xl: clamp(3rem, 1.5652rem + 7.1739vw, 7.125rem);

  /* Element Padding */
  --rd-padding-xs: 4px;
  --rd-padding-s: 8px;
  --rd-padding-m: 16px;
  --rd-padding-l: 24px;
  --rd-padding-xl: 32px;
  --rd-padding-2xl: 48px;

   /* Borders */ 
   --rd-border-width-thin: 1px;
   --rd-border-width-default: 2px;
   --rd-border-width-thick: 4px;

  /* Border radius */
  --rd-br-xs: 2px;
  --rd-br-s: 4px;
  --rd-br-m: 8px;
  --rd-br-l: 16px;
  --rd-br-xl: 24px;

  /* Default roundness for theme elements */
  --rd-radius-default: var(--rd-br-s); 
  --rd-radius-card: var(--rd-br-m);
  --rd-radius-card-inner: var(--rd-br-s);
  --rd-radius-button: var(--rd-br-s);
  --rd-radius-pill:999px;

  /* Accessability styles */
  --rd-focus-outline-width: 2px;
  --rd-focus-outline-color: var(--rd-c-primary);
  /* Link outline offset, keeps overlapping text */
  --rd-focus-outline-offset: 3px;

  /* Default motion and animations */
  --rd-motion-translate-positive: 100px;
  --rd-motion-translate-negative: -100px;
  --rd-time-default: .25s;
  --rd-time-fast: .1s;
  --rd-time-slow: 0.5s;
  --rd-ease: ease-in-out;

  /* Content Widths */
  --rd-main-container-width: 1480px; /* Site default */
  --rd-main-container-width-wide: 1280px;
  --rd-main-container-width-narrow: 48rem;
  --rd-main-container-width-extra-narrow: 32rem;
  --rd-article-content-width:48rem;

  /* Spacing */
  /* Typography Spacing in Typography */

  /* Main content padding (left-right) */
  --rd-spacing-content-padding:var(--rd-space-m);
  /* Other spacing defaults */
  --rd-spacing-grid-gap:var(--rd-space-s);
  --rd-spacing-block-default:var(--rd-space-m);  

  --rd-spacing-section-gap-s: 1rem;
  --rd-spacing-section-gap-m: var(--rd-space-l);
  --rd-spacing-section-gap-l: var(--rd-space-2xl);
  --rd-spacing-section-gap-xl: var(--rd-space-3xl);

    /* Typography */
	/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,19,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

/* Extra-small / micro text */
--rd-fs-200: clamp(0.75rem, 0.72rem + 0.20vw, 0.875rem);   /* ~12–14px */
--rd-fs-250: clamp(0.8125rem, 0.78rem + 0.25vw, 0.9375rem);/* ~13–15px */
--rd-fs-300: clamp(0.875rem, 0.83rem + 0.30vw, 1.075rem);      /* ~14–18px */

/* Body text */
--rd-fs-400: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);     /* ~16–19px (anchor) */
--rd-fs-500: clamp(1.125rem, 1.05rem + 0.40vw, 1.3125rem); /* ~18–21px */

/* Headings */
--rd-fs-600: clamp(1.25rem, 1.18rem + 0.45vw, 1.5rem);     /* ~20–24px */
--rd-fs-700: clamp(1.5rem, 1.40rem + 0.55vw, 1.75rem);     /* ~24–28px */
--rd-fs-800: clamp(1.625rem, 1.52rem + 0.65vw, 2rem);      /* ~26–32px */
--rd-fs-900: clamp(1.875rem, 1.75rem + 0.70vw, 2.25rem);   /* ~30–36px */

/* Display / hero */
--rd-fs-1000: clamp(2.25rem, 2.05rem + 0.90vw, 2.75rem);   /* ~36–44px */
--rd-fs-1100: clamp(2.5rem,  2.20rem + 1.20vw, 3.25rem);   /* ~40–52px */
--rd-fs-1200: clamp(3rem,    2.50rem + 1.80vw, 4rem);      /* ~48–64px */


    --rd-ff-logo: "Eksell", Georgia, Times, serif;
    --rd-ff-heading: "Eksell", Georgia, Times, serif;
    --rd-ff-body: "Apercu", Courier, Helvetica, Arial, sans-serif;
    --rd-ff-functional: "Pressura", Courier, monospace;

    --rd-typography-family-body: var(--rd-ff-body);
    --rd-typography-size-body: var(--rd-fs-400);
    --rd-typography-weight-body: 300;
    --rd-typography-weight-bold: 500;
    --rd-typography-line-height-body: 1.6;
    --rd-typography-margin-bottom-body:var(--rd-space-m);

    --rd-typography-family-heading: var(--rd-ff-heading:);
    --rd-typography-weight-heading: 300;
    --rd-typography-line-height-heading: 1.2;
    --rd-typography-margin-top-heading: var(--rd-space-l);
    --rd-typography-margin-bottom-heading: var(--rd-space-s);

    --rd-typography-line-height-hero: 1.1;
    --rd-typography-family-hero: var(--rd-ff-heading);
    --rd-typography-weight-hero: 500;
  }

/* Set Spacing to different screen sizes */

 @media (max-width: 768px) {
    :root {
        --rd-spacing-content-padding:var(--rd-space-s);
        --rd-spacing-grid-gap:var(--rd-space-s);
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --rd-spacing-content-padding:var(--rd-space-l);
    }
}